/**
 * View: Conference Detail (conference.view, item.view)
 * Admin config: conference_configJSON.article_view (per-conference)
 * Root class: .view-conference-detail
 *
 * Covers:
 *   views/system-modules/proceedings/conference/list.cfm
 *   views/system-modules/proceedings/session/list.cfm
 *   views/search/advanced_search.cfm (when rendered inside conference detail)
 */

@import "_vars.css";

/* ============================================================
   CONFERENCE PAGE HEADER — .conf-page-header
   view_card.cfm  (banner image + title + date/location + video btn)
   ============================================================ */

.conf-page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.25rem 0 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.conf-page-header__banner {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.4rem;
  line-height: 0;
}

.conf-page-header__banner-img {
  display: block;
  max-height: 100px;
  max-width: 180px;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.conf-page-header__meta {
  flex: 1;
  min-width: 0;
}

.conf-page-header__title {
  font-family: var(--font-family);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 0.2rem;
}

.conf-page-header__title-link {
  color: var(--primary-color);
  text-decoration: none;
}

.conf-page-header__title-link:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

.conf-page-header__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.conf-page-header__date,
.conf-page-header__location {
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

.conf-page-header__video-btn-wrap {
  margin-top: 0.25rem;
}

@media (max-width: 767.98px) {
  .conf-page-header {
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.75rem 0;
  }

  .conf-page-header__banner-img {
    max-height: 80px;
    max-width: 140px;
  }

  .conf-page-header__title {
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .conf-page-header__banner-img {
    height: 60px;
  }
}

/* ============================================================
   VIDEO FILTER BUTTON — .video-filter-btn
   Replaces custom-video-btn inline styles in video_filter_button.cfm
   ============================================================ */

.video-filter-btn {
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1.5px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.15s ease;
}

.video-filter-btn--inactive {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-on-primary);
}

.video-filter-btn--inactive:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-on-primary);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 40%, transparent);
  transform: translateY(-1px);
}

.video-filter-btn--active {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-body);
}

.video-filter-btn--active:hover {
  background-color: var(--color-bg-page);
  border-color: var(--color-text-muted);
  color: var(--color-text);
  transform: translateY(-1px);
}

/* ============================================================
   CONFERENCE HEADER — legacy classes (list.cfm + session/list.cfm)
   .conference-name-header, .title-conference,
   .date-text-conference, .city-text-conference
   ============================================================ */

.conference-name-header {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

a.conference-name-header,
.conference-name-header a {
  color: var(--primary-color);
  text-decoration: none;
}

a.conference-name-header:hover,
.conference-name-header a:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

.title-conference {
  font-family: var(--font-family);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.date-text-conference,
.city-text-conference {
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0.15rem 0;
  line-height: 1.5;
}

/* ============================================================
   DOI LINK CARD
   .card.linkcard, .conference-doi
   ============================================================ */

.card.linkcard {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.conference-doi {
  font-size: var(--font-size-sm);
  padding: 0.25rem 0;
}

.conference-doi a.text-link {
  color: var(--primary-color);
  font-family: var(--font-family);
  font-size: 0.825rem;
  word-break: break-all;
  text-decoration: none;
}

.conference-doi a.text-link:hover {
  text-decoration: underline;
}

/* ============================================================
   RESULTS SUMMARY BAR
   .summary-span, .search-results-sumary
   ============================================================ */

.summary-span {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
}

.search-results-sumary {
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* "Related Articles" heading shown on author pages with ≤ 10 results */
.related-articles-header {
  font-family: var(--font-family);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  margin-bottom: 0.6rem;
  padding: 0;
  border: none;
}

.search-results-sumary strong,
.search-results-sumary b {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--color-text);
}

/* Inline controls embedded inside .summary-span (global search) */
.summary-span__controls {
  flex-shrink: 0;
  gap: 6px;
}

.summary-span__controls .conf-controls-bar__label,
.summary-span__controls .conf-controls-bar__label--inline {
  margin-left: 0;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

/* Compact dropdowns — match summary text scale (not full conf-controls-bar size) */
.summary-span__controls .display-order-btn-dp {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  gap: 4px !important;
}

.summary-span__controls .display-order-dropdown .dropdown-menu {
  font-size: var(--font-size-xs);
  min-width: 9rem;
  padding: 0.25rem 0;
  border-radius: 6px;
}

.summary-span__controls .display-order-dropdown .dropdown-item {
  font-size: var(--font-size-xs);
  padding: 0.35rem 0.75rem;
  line-height: 1.4;
}

.summary-span__controls .display-order-dropdown .dropdown-item.active,
.summary-span__controls .display-order-dropdown .dropdown-item:active {
  font-weight: 500;
  color: var(--primary-color) !important;
  background-color: color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
}

.summary-span__controls .dropdown-toggle::after {
  margin-left: 0.35em;
  vertical-align: 0.12em;
  border-width: 0.3em 0.3em 0;
}

@media (max-width: 767.98px) {
  .summary-span__controls {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

/* ============================================================
   FILTER / SORT BAR
   .bg-filter, .filter-bar, .filter-bar__search, .filter-bar__tags
   ============================================================ */

.bg-filter {
  background: var(--color-bg-gradient, linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-bg-surface) 100%));
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Flex row containing Display Order, search input, and Filter button */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bootstrap .dropdown wrapper inside the filter bar —
   must be a flex container so the trigger button centers correctly */
.filter-bar > .dropdown {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Search input wrapper — grows to fill remaining space */
.filter-bar__search {
  flex: 1;
  min-width: 0;
}

/* Applied filter tag row */
.filter-bar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* On small screens: search takes full row, dropdown + filter stay inline */
@media (max-width: 575.98px) {
  .filter-bar {
    flex-wrap: wrap;
  }

  .filter-bar__search {
    order: 3;
    flex: 1 1 100%;
  }
}

/* Filter search input in the filter bar */
.filter-search-component .form-control.conference-filter-search {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--color-text) !important;
  padding: 0.3rem 0.75rem !important;
  border-color: var(--color-border) !important;
  border-radius: 6px 0 0 6px !important;
}

.filter-search-component .form-control.conference-filter-search:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
  outline: none !important;
}

/* Filter badge button (remove applied filters) */
.btn-remove-filters {
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--color-surface, var(--color-bg-page));
  color: var(--color-text-secondary, var(--color-text-body));
  border-color: var(--color-border);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-remove-filters:hover {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* ============================================================
   SESSION CARDS
   .conference-banner-card, .banner-card-title,
   .card-article-count, .card-article-count-number
   ============================================================ */

.conference-banner-card {
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
  border: 1px solid var(--color-border);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.conference-banner-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.banner-card-title {
  font-size: var(--font-size-article-title);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, var(--color-text));
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.banner-card-title a.link,
.banner-card-title span.link {
  color: var(--primary-color);
  text-decoration: none;
}

.banner-card-title a.link:hover {
  text-decoration: underline;
}

/* Article count pill badge on session cards */
.card-article-count {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium, 500);
  background-color: var(--color-surface, var(--color-bg-page));
  color: var(--color-text-secondary, var(--color-text-body));
  padding: 0.15rem 0.5rem;
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  line-height: 1.5;
}

.card-article-count-number {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold, 700);
  background-color: var(--primary-color);
  color: var(--color-on-primary);
  padding: 0.15rem 0.5rem;
  border-radius: 0 999px 999px 0;
  border: 1px solid var(--primary-color);
  vertical-align: middle;
  line-height: 1.5;
}

/* ============================================================
   SESSION / TRACK SEGMENTED CONTROL  (.st-toggle)
   Inline compact toggle that lives inside .conf-controls-bar.
   Matches the screenshot-2 "Count | Revenue" style:
   active option gets a bordered box; inactive is plain text.
   ============================================================ */

/* ── GROUP BY label wrapper ── */
.st-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-toggle-group__label {
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--cdp-color-text-muted, var(--color-text-secondary));
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide the actual radio inputs */
.st-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Pill-track container */
.st-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 2px;
}

/* Each label — inactive: plain muted text */
.st-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--font-size-card-badge);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  user-select: none;
  white-space: nowrap;
}

/* Icon — app-icon <i> from icon component */
.st-toggle__icon {
  font-size: var(--font-size-card-icon) !important;
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

/* Active: white card pill with border + shadow */
.st-toggle__btn--active {
  background: var(--color-bg-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.st-toggle__btn--active .st-toggle__icon {
  opacity: 0.9;
}

/* Hover on inactive */
.st-toggle__btn:hover:not(.st-toggle__btn--active) {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

/* Native <button> inside segmented control (Card/List toggle) */
.st-toggle button.st-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  margin: 0;
}

/* Legacy class aliases — keep until old .toggle-* markup is gone */
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.toggle-buttons { display: inline-flex; border: 1px solid var(--primary-color); border-radius: 0.375rem; overflow: hidden; }
.toggle-label { display: inline-block; padding: 0.3rem 1.1rem; font-size: var(--font-size-sm); font-weight: 500; color: var(--primary-color); background: #fff; cursor: pointer; border: none; transition: background 0.15s, color 0.15s; user-select: none; line-height: 1.5; }
.toggle-label:not(:last-child) { border-right: 1px solid var(--primary-color); }
.toggle-label.active { background: var(--primary-color); color: #fff; }
.toggle-label:hover:not(.active) { background: rgba(37,99,235,0.08); }

/* Pagination styles moved to assets/css/components/pagination.css (loaded globally) */

/* ============================================================
   TWO-COLUMN LAYOUT — restore gutters removed by row g-0
   conference/list.cfm and legacy conference/view.cfm use g-0 on their row
   ============================================================ */

/* Give the outer container a white background so no dark header bleeds through */


/* Sidebar column: right gap toward results (desktop only) */
.col-lg-4.search-content {
  padding-right: 1.25rem !important;
}

/* Results column: left gap away from sidebar (desktop only) */
.col-lg-9.nopadding {
  padding-left: 1.25rem !important;
}

/* On mobile/tablet — drop the desktop-only 1.25rem column gutters (rules above).
   g-0 rows: columns sit flush, the container inset above is the only padding.
   Gutter rows: restore the standard Bootstrap half-gutter so both edges match. */
@media (max-width: 991.98px) {
  .search-content {
    margin-bottom: 1rem;
  }

  .row.g-0 > .search-content { padding-right: 0 !important; }
  .row.g-0 > .nopadding      { padding-left: 0 !important; }

  .row:not(.g-0) > .search-content { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; }
  .row:not(.g-0) > .nopadding      { padding-left: calc(var(--bs-gutter-x) * 0.5) !important; }
}

/* ============================================================
   ADVANCED SEARCH SIDEBAR
   .search-content, .header-1, .sub-text-1, .sub-text,
   .conference-reset-button, .conference-search-button
   ============================================================ */

/* Column wrapper — stop it from stretching full row height and add right gap */
.search-content {
  font-family: var(--font-family);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 0.75rem 0.75rem 0.6rem;
  margin-bottom: 0.75rem;
  padding-right: 1.25rem;
  align-self: flex-start;
}

.search-content .main-header {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

/* Sidebar section heading ("Refine Results") */
.search-content .header-1 {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

/* Help tip line */
.search-content .sub-text {
  font-family: var(--font-family);
  font-size: 0.73rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
  line-height: 1.4;
  font-weight: 400;
}

/* Error message */
.search-content .error-message {
  font-family: var(--font-family);
  font-size: 0.73rem;
  color: var(--color-danger);
}

/* Filter category labels (Tracks, Sessions, Years…) */
.search-content .sub-text-1 {
  font-family: var(--font-family) !important;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 0.75rem !important;
  margin-bottom: 0.3rem !important;
  line-height: 1;
}

/* "in" operator text between search term and field select */
.search-content .center-text p {
  font-family: var(--font-family);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1;
}

/* Tighten the form-row Bootstrap row gaps */
.search-content .form-row {
  margin-bottom: 0.25rem !important;
  row-gap: 0.25rem;
}

/* Remove excess bottom gap from the search-terms-container */
.search-content .search-terms-container {
  row-gap: 0.2rem;
}

/* Search term input */
.search-content .form-control.term {
  font-family: var(--font-family);
  font-size: 0.78rem;
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  height: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-content .form-control.term:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(100, 61, 175, 0.12);
  outline: none;
}

.search-content .form-control.term::placeholder {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Field select dropdown */
.search-content .form-select.searchField,
.search-content .form-select.operator {
  font-family: var(--font-family);
  font-size: 0.78rem;
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  height: auto;
  transition: border-color 0.15s ease;
}

.search-content .form-select.searchField:focus,
.search-content .form-select.operator:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(100, 61, 175, 0.12);
}

/* Separator between additional search rows */
.search-content hr.divider {
  border-color: var(--color-border);
  margin: 0.4rem 0;
  opacity: 1;
}

/* Add / Remove row icon buttons */
.search-content .add-button,
.search-content .close-button {
  display: flex;
  align-items: center;
  padding-top: 0.3rem;
}

/* Select2 multi-select filter dropdowns */
.search-content .select2-container .select2-selection--multiple {
  font-family: var(--font-family);
  font-size: 0.78rem;
  border-color: var(--color-border) !important;
  border-radius: 6px !important;
  min-height: 32px;
}

.search-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-family: var(--font-family);
  font-size: 0.7rem;
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 999px;
  padding: 0 0.45rem;
  margin: 2px 2px;
}

/* Action row – Reset + Search buttons */
.search-content .col-lg-5.d-grid {
  margin-top: 0.5rem;
}

/* Reset button – neutral outline */
.conference-reset-button {
  font-family: var(--font-family) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.65rem !important;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
}

.conference-reset-button:hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

/* Search button – primary fill */
.conference-search-button {
  font-family: var(--font-family) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--color-on-primary) !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.65rem !important;
  transition: opacity 0.15s ease !important;
}

.conference-search-button:hover {
  opacity: 0.88 !important;
  color: var(--color-on-primary) !important;
  background-color: var(--primary-color) !important;
}


/* ============================================================
   Conference Detail Page — body-level overrides
   Applied when <body> carries .conf-detail-page
   (category.list and item.view non-leaf conference pages)
   ============================================================ */

/* Hide the global search bar so the hero banner sits flush below the nav */
.conf-detail-page .masthead-search {
  display: none;
}

/* Track drill-down heading + description — shown above the article count when a tag filter is active */
.conference-detail-track-heading {
  font-size: var(--font-size-section-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary, inherit);
  margin: 1rem 0 0.25rem;
  padding: 0;
}

@media (min-width: 768px) {
  .conference-detail-track-heading {
    font-size: 1.6rem;
  }
}

.conference-detail-track-description {
  margin-bottom: 0.75rem;
}

.conference-detail-track-description__text {
  color: var(--color-text-secondary, #555);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0.35rem;
}

.conference-detail-track-description__toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link, #0d6efd);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conference-detail-track-description__toggle:hover {
  color: var(--color-link-hover, #0a58ca);
}

/*
 * Conference detail body (.conference-detail-main): same .masthead-shell box as hero.
 * 1) Controls bar — drop side padding so count/display align with breadcrumb / nav.
 * 2) Card grids — Bootstrap row negative margins must not extend past shell gutters.
 */
.conf-detail-page .masthead-shell.conference-detail-main {
  overflow-x: clip;
}

.conf-detail-page .masthead-shell.conference-detail-main > .conf-controls-bar {
  width: 100%;
  max-width: 100%;
}

.conf-detail-page .masthead-shell.conference-detail-main .row[class*="row-cols"] {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Single column on phone: no side col padding. md+ 2-col: gutter only between columns. */
.conf-detail-page .masthead-shell.conference-detail-main .row.row-cols-md-2 > .col {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .conf-detail-page .masthead-shell.conference-detail-main .row.row-cols-md-2 > .col {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  .conf-detail-page .masthead-shell.conference-detail-main .row.row-cols-md-2 > .col:nth-child(2n) {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: 0;
  }
}


/* ============================================================
   FIGMA 89-67 — DisplayControls bar
   ============================================================ */

.cdp-display-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 15px;
  height: auto;
  min-height: 52px;
}

.cdp-display-bar__count {
  font-size: var(--font-size-card-badge);
  color: var(--color-text);
  white-space: nowrap;
}
.cdp-display-bar__count strong {
  font-weight: 600;
  margin-right: 3px;
}
.cdp-display-bar__count span {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.cdp-display-bar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cdp-display-bar__label {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  white-space: nowrap;
  letter-spacing: 0.06px;
}

.cdp-display-bar__dd-btn {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  height: 30px;
  padding: 0 10px 0 12px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text);
  letter-spacing: -0.08px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s;
}
.cdp-display-bar__dd-btn:hover,
.cdp-display-bar__dd-btn:focus {
  border-color: var(--color-text-muted);
  outline: none;
  box-shadow: none;
}
.cdp-display-bar__dd-caret {
  font-size: 9px;
  color: var(--color-text-secondary);
}


/* ============================================================
   FIGMA 89-67 — Session sections & paper cards
   ============================================================ */

/* Outer wrapper for all session sections */
.cdp-card-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
  padding-bottom: 32px;
}

/* Individual session section */
.cdp-session-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section header row */
.cdp-session-section__hdr {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 35px;
  padding-bottom: 4px;
}

.cdp-session-section__accent {
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--color-neutral-700);
  border-radius: 9999px;
  flex-shrink: 0;
  margin-right: 10px;
}

.cdp-session-section__title {
  flex: 1;
  font-size: var(--font-size-card-meta);
  font-weight: 600;
  color: var(--color-text-body);
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.cdp-session-section__count {
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.06px;
  white-space: nowrap;
  margin-left: 12px;
}

/* Paper card grid: Bootstrap row-cols in markup (row row-cols-1 row-cols-md-2 g-3)
   — custom .cdp-paper-grid CSS removed; see layout_article_list.cfm / cards/session_track.cfm */

/* ── Paper card ─────────────────────────────────────────────── */
.cdp-paper-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.cdp-paper-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  color: inherit;
  text-decoration: none;
}
.cdp-paper-card--locked {
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
}
.cdp-paper-card--locked .access-lock-icon {
  pointer-events: auto;
  cursor: help;
}

/* Card body */
.cdp-paper-card__body {
  flex: 1;
  padding: 10px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Track badge row — always rendered for consistent spacing (mirrors Figma 10px top gap) */
.cdp-paper-card__badge-row {
  display: flex;
  align-items: center;
  min-height: 19px;
  flex-wrap: wrap;
  gap: 4px;
}

.cdp-paper-card__track-badge {
  background: rgba(51, 65, 85, 0.08);
  border-radius: 9999px;
  padding: var(--cdp-chip-padding-y) var(--cdp-chip-padding-x);
  font-size: var(--cdp-chip-font-size);
  font-weight: var(--cdp-chip-font-weight);
  color: var(--color-text-body);
  letter-spacing: 0.12px;
  white-space: nowrap;
  line-height: var(--cdp-chip-line-height);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* Tooltip for truncated track badge — shown on hover */
.cdp-track-tooltip {
  position: relative;
  cursor: default;
}
.cdp-track-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--color-text);
  color: var(--color-bg-page);
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: normal;
  max-width: 260px;
  min-width: 120px;
  line-height: 1.4;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cdp-track-tooltip:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Title row: title + papers pill (session cards, mirrors list view) */
.cdp-paper-card__title-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.cdp-paper-card__title-line .cdp-paper-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.cdp-paper-card__title-line .conf-list-row__article-count {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Title */
.cdp-paper-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadata row */
.cdp-paper-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-secondary);
  letter-spacing: 0.06px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdp-paper-card__meta i {
  font-size: var(--font-size-card-icon);
  flex-shrink: 0;
}
.cdp-paper-card__conf-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.cdp-paper-card__conf-name i { font-size: var(--font-size-card-icon); flex-shrink: 0; }

/* Footer — Figma 483:163: border-t #f1f3f5, h-24px, top-[3px] for text */
.cdp-paper-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border-subtle);
  min-height: 24px;
  gap: 8px;
}

.cdp-paper-card__footer > .cdp-authors-inline {
  flex: 1 1 auto;
  min-width: 0;
}

.cdp-paper-card__footer > .cdp-paper-card__count {
  flex-shrink: 0;
}

/* Mid-dot separator + secondary meta in the meta row */
.cdp-paper-card__meta-dot {
  display: none !important;
}

/* Wrap-safe middot rows (conference cards, session/article meta, content-type lists) */
.cli-meta-row {
  gap: 0;
  row-gap: 0.125rem;
}

.cli-meta-row > .cli-meta-part:not(.d-none) ~ .cli-meta-part:not(.d-none)::before {
  content: "·";
  color: var(--cli-meta-sep-color, var(--color-text-muted));
  font-size: var(--cli-meta-sep-size, 13px);
  font-weight: var(--font-weight-medium);
  margin: 0 var(--cli-meta-sep-gap, 6px);
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  line-height: 1;
}

.cli-meta-part {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

/* Sm+ only — avoids Bootstrap .d-none so cli-meta-row · separators still apply */
.cli-meta-part--sm-up {
  display: none !important;
}

@media (min-width: 576px) {
  .cli-meta-part--sm-up {
    display: inline-flex !important;
  }
}

.cdp-paper-card__meta-secondary {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdp-paper-card__badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.cdp-paper-card__badge {
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.cdp-paper-card__badge--video  { background: #e8f4fd; color: #1a7abf; }
.cdp-paper-card__badge--paper  { background: #e8f8ee; color: #1a7a4a; }
.cdp-paper-card__badge--pdf    { background: #fdf0e8; color: #c05621; }
.cdp-paper-card__badge--poster { background: #f3e8fd; color: #7c3aed; }

.cdp-paper-card__count {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.cdp-paper-card__count .cdp-icon-eye { flex-shrink: 0; vertical-align: middle; font-size: var(--font-size-card-icon); }
/* Download count wrapper — hidden until JS populates a non-zero value */
.cdp-paper-card__count--downloads { display: none; }
/* View count wrapper — hidden until JS populates a non-zero value */
.cdp-paper-card__count--views { display: none; }
.cdp-paper-card__count--views.cdp-paper-card__count--visible { display: flex; }
.cdp-paper-card__count .cdp-icon-download { flex-shrink: 0; vertical-align: middle; font-size: var(--font-size-card-icon); }
.conf-list-row__chevron i { font-size: var(--font-size-card-icon); line-height: 1; }
.conf-list-row__downloads .cdp-icon-download { font-size: var(--font-size-card-icon); }
.cdp-paper-card__count .cdp-icon-papers {
  font-size: var(--font-size-card-icon);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Content-type labels in session card footer — plain muted text, no pill backgrounds */
.cdp-paper-card__content-types {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List-view session row: content-type tags (Video · PDF etc.) */
.conf-list-row__content-types {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-body);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* "View →" CTA inside session cards */
.cdp-paper-card__view-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  color: var(--color-text-body);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
/* The whole card is an <a>, so hover is on the card — just darken the CTA */
.cdp-paper-card:hover .cdp-paper-card__view-cta {
  color: var(--color-text);
}

/* ============================================================
   LIST VIEW  (Figma 72-3678 / 72-3732)
   Table-style rows: Title | Track | Author(s) | Count | Chevron
   ============================================================ */

/* Outer card wrapper */
.cdp-list-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Column header row */
.cdp-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 16px;
  height: 34px;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}

/* Data row */
.cdp-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 48px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.cdp-list-row:last-child { border-bottom: none; }
.cdp-list-row:hover { background: var(--color-bg-muted); color: inherit; text-decoration: none; }

/* Shared column base */
.cdp-list-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Header label style */
.cdp-list-header .cdp-list-col {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.62px;
  text-transform: uppercase;
  line-height: 15px;
}

/* Title column — flex-grow, single-line truncation */
.cdp-list-col--title {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

/* Title text */
.cdp-list-row__title {
  font-size: var(--font-size-card-meta);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.08px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}

/* Session/track inline badge (e.g. "1/2", "S1") */
.cdp-list-row__badge {
  background: rgba(51, 65, 85, 0.07);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-body);
  letter-spacing: 0.12px;
  line-height: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Track column */
.cdp-list-col--track {
  width: 130px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  letter-spacing: 0.06px;
  line-height: 16.5px;
}

/* Author(s) column */
.cdp-list-col--authors {
  width: 140px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  letter-spacing: 0.06px;
  line-height: 16.5px;
}

/* Empty dash placeholder */
.cdp-list-row__empty {
  color: var(--color-border-strong);
}

/* Count (views) column — right-aligned, icon + number */
.cdp-list-col--count {
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  letter-spacing: 0.06px;
  line-height: 16.5px;
}
.cdp-list-col--count .cdp-icon-eye { flex-shrink: 0; vertical-align: middle; }

/* Right chevron spacer (header) and chevron (rows) */
.cdp-list-col--arrow-spacer { width: 13px; flex-shrink: 0; }
.cdp-list-row__arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Responsive adjustments ─────────────────────────────────── */
/* ── Mobile (≤639px) ───────────────────────────────────────── */
@media (max-width: 639px) {
  /* Display bar stacks vertically */
  .cdp-display-bar {
    height: auto;
    min-height: 52px;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cdp-display-bar__controls {
    width: 100%;
    justify-content: flex-end;
  }
  .cdp-session-section__title { font-size: var(--font-size-card-badge); }

  /* List view: show only Title + chevron */
  .cdp-list-col--track,
  .cdp-list-col--authors,
  .cdp-list-col--count,
  .cdp-list-col--arrow-spacer { display: none; }

  /* Hide the session badge on mobile — title space is too tight */
  .cdp-list-row__badge { display: none; }

  .cdp-list-section { border-radius: 8px; }
  .cdp-list-header  { padding: 0 12px; height: 28px; }
  .cdp-list-row     { padding: 0 12px; height: 48px; }
  .cdp-list-row__title { font-size: var(--font-size-card-badge); }
}

/* ── Tablet / iPad (640px – 1023px) ────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  /* List view: hide Author(s); shrink Track column */
  .cdp-list-col--authors { display: none; }
  .cdp-list-col--track   { width: 110px; }
  .cdp-list-col--count   { width: 44px; }

  .cdp-list-row__title { font-size: var(--font-size-card-badge); }
}


/* ============================================================
   FIGMA IMPLEMENTATION — Conference Detail Page
   ============================================================ */


/* ── T2: Paper Card Anatomy ─────────────────────────────────── */

.conference-banner-card {
  border: 1px solid var(--cdp-color-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--cdp-shadow-card) !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conference-banner-card::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--cdp-color-session-accent);
  border-radius: 10px 10px 0 0;
  opacity: 0.7;
  flex-shrink: 0;
}

.banner-card-title,
.horizontal-text {
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: -0.3004px !important;
  color: var(--cdp-color-text-primary) !important;
}

.Tag-style,
.Tag-style-1 {
  background: var(--cdp-badge-bg-card) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  color: var(--color-text-body) !important;
  letter-spacing: 0.1172px !important;
  height: 19px !important;
  padding: 2px 7px !important;
  display: inline-flex;
  align-items: center;
}

.conference-banner-card__meta {
  color: var(--cdp-color-text-secondary) !important;
  line-height: 16.5px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.conference-banner-card__meta-sep {
  width: 3px;
  height: 3px;
  background: var(--color-border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.conference-banner-card__badges {
  border-top: 1px solid var(--cdp-color-divider) !important;
  padding-top: 3px !important;
  margin-top: 4px !important;
}

.metadata-text,
.horizontal-author {
  color: var(--cdp-color-text-muted) !important;
  line-height: 16.5px !important;
}


/* ── T3: Display Controls Bar ───────────────────────────────── */

.conf-controls-bar {
  background: var(--color-bg-surface);
  border: 1px solid var(--cdp-color-border);
  border-radius: 10px;
  min-height: 40px;      /* Figma 483:59: ~32px + breathing room */
  display: flex;
  align-items: center;
  padding: 0 15px;       /* Figma: px-[15px] */
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Push order/per-page right when the bar has no inline search or filter actions */
.conf-controls-bar:not(.conf-controls-bar--zoned):not(:has(.filter-search-component)):not(:has(.display-filter-btn)) > .conf-controls-bar__display {
  margin-left: auto;
}

/* Phone: keep margin-left:auto so dropdowns stay right-aligned on the same row as the count */

/* 3-zone bar: count (left) · card/list (center) · display (right) */
.conf-controls-bar--zoned {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.conf-controls-bar--zoned .conf-controls-bar__start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}

.conf-controls-bar--zoned .conf-controls-bar__center {
  grid-column: 2;
  justify-self: center;
}

.conf-controls-bar--zoned > .conf-controls-bar__display {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

/* No card/list toggle — two columns only */
.conf-controls-bar--zoned:not(:has(.conf-controls-bar__center)) {
  grid-template-columns: 1fr auto;
}

.conf-controls-bar--zoned:not(:has(.conf-controls-bar__center)) > .conf-controls-bar__display {
  grid-column: 2;
}

/* Small phones (<576px): 3 zones (~500px) don't fit one row — restack as
   row 1: count (left) · card/list toggle (right)
   row 2: Display dropdowns, full width.
   ≥576px keeps the single-row grid (zones fit from sm up).
   Selectors repeat the :not(:has()) variant to outrank its base rules. */
@media (max-width: 575.98px) {
  .conf-controls-bar--zoned,
  .conf-controls-bar--zoned:not(:has(.conf-controls-bar__center)) {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .conf-controls-bar--zoned .conf-controls-bar__center {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .conf-controls-bar--zoned > .conf-controls-bar__display,
  .conf-controls-bar--zoned:not(:has(.conf-controls-bar__center)) > .conf-controls-bar__display {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.conf-controls-bar__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.conf-controls-bar__count strong {
  font-size: var(--font-size-card-badge);
  font-weight: 600;
  color: var(--cdp-color-text-primary);
}

.conf-controls-bar__count span {
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: var(--cdp-color-text-secondary);
}

.conf-controls-bar__label {
  font-size: var(--font-size-article-meta);
  color: var(--cdp-color-text-muted);
  letter-spacing: 0.0645px;
  margin-left: 0;
  white-space: nowrap;
}

.conf-controls-bar__label--inline {
  margin-left: 0;
}

/* Dropdown buttons — Figma 483:59: h-30px, rounded-7px, border-[#e9ecef] */
.conf-controls-bar .display-order-btn-dp {
  height: 30px !important;
  border-radius: 7px !important;
  font-size: var(--font-size-card-badge) !important;
  padding: 0 10px !important;
  line-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.conf-controls-bar .display-order-btn-dp:active {
  background-color: var(--color-bg-muted) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: none !important;
}


/* ── T4: Session Section Headers ────────────────────────────── */

.conf-session-header {
  display: flex;
  align-items: center;
  min-height: 35px;
  gap: 10px;
  position: relative;
  margin-bottom: 11px;
  padding: 4px 0;
}

.conf-session-header__bar {
  width: 3px;
  height: 18px;
  background: var(--cdp-color-session-accent);
  border-radius: 9999px;
  flex-shrink: 0;
}

.conf-session-header__title {
  font-size: var(--font-size-card-meta);
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: -0.0762px;
  color: var(--cdp-color-session-title);
  flex: 1;
  margin: 0;
}

.conf-session-header__count {
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  color: var(--cdp-color-text-muted);
  letter-spacing: 0.0645px;
  flex-shrink: 0;
}


/* ── T5: List Table (Figma 483-555 / 483-694) ───────────────── */

.conf-list-table {
  width: 100%;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  margin-bottom: 20px;
}

/* ── List Row — Figma: px-14px pb-1px gap-12px items-center ── */
.conf-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 40px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);  /* Figma: border-[#f1f3f5] */
  transition: background 0.1s ease;
  /* Row is now an <a> — reset link defaults */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.conf-list-row:last-child { border-bottom: none; }

.conf-list-row:hover { background: var(--color-bg-muted); }

/* Propagate row hover to child spans that replaced inner <a> tags */
.conf-list-row:hover .conf-list-row__title {
  color: var(--cdp-color-reset-btn);
}
.conf-list-row:hover .conf-list-row__chevron { color: var(--color-text-secondary); }
.conf-list-row:hover .conf-list-row__view-link { color: #1d4ed8; }

/* Locked article row — shown for full_restriction and hide_without_access */
.conf-list-row--locked {
  cursor: default;
  opacity: 0.7;
  pointer-events: none;
}
.conf-list-row--locked .access-lock-icon {
  pointer-events: auto;
}
.conf-list-row--locked:hover { background: transparent; }
.conf-list-row--locked .conf-list-row__title { color: var(--color-text-secondary); }
.conf-list-row__lock {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  cursor: help;
}

/* ── Row number ── Figma: 28px, right-aligned, #ced4da, 12px medium */
.conf-list-row__num {
  width: 28px;
  flex-shrink: 0;
  font-size: var(--font-size-card-badge);
  font-weight: 500;
  color: var(--color-border-strong);
  text-align: right;
  line-height: 18px;
}

/* ── Vertical divider ── Figma: 2px × 32px, rgba(51,65,85,0.19) */
.conf-list-row__divider {
  width: 2px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(51, 65, 85, 0.19);
  border-radius: 9999px;
}

/* ── Info block: title + authors stacked (flex; title wraps ~2 lines) */
.conf-list-row__info {
  flex: 0 1 36%;
  max-width: 400px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* Title row: flex container so title + count pill sit side-by-side */
.conf-list-row__title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Article count pill — shows next to title on session/track list rows.
   Color/bg only; padding/size/font come from .cdp-chip (cdp-chip--count class). */
.conf-list-row__article-count {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Title line — up to 2 lines; full text in title attribute */
.conf-list-row__title {
  font-size: var(--font-size-card-meta);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.0762px;
  line-height: 18px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  min-width: 0;
}

.conf-list-row__title:hover {
  color: var(--cdp-color-reset-btn);
}

/* Direct article list — full title, no description column */
.conf-list-table--article-list .conf-list-row {
  align-items: flex-start;
}

.conf-list-table--article-list .conf-list-row__info {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
}

/* Title keeps the base 2-line clamp; long unbroken strings still wrap inside it */
.conf-list-table--article-list .conf-list-row__title {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Authors · Company: single truncated line (base nowrap/ellipsis applies) */

/* Author block — avatar + name + company */
.conf-list-row__author-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
  width: 100%;
}

.conf-list-row__author-block > .cdp-authors-inline {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

.conf-list-row__author-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

/* Authors line — Figma: 11px, regular, #9ca3af, tracking-0.0645px */
.conf-list-row__authors {
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.0645px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.conf-list-row__company {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.05px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.conf-list-row__context {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.05px;
  line-height: 14px;
  margin-top: 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conf-list-row__conf-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.conf-list-row__conf-name i { font-size: var(--font-size-card-icon); }


/* ── Abstract/description ── Figma: flex-1, 12px, #6c757d, 2-line clamp */
.conf-list-row__abstract {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 17px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Views + Chevron ── Figma: 53px container, eye+count left, chevron right */
.conf-list-row__meta {
  min-width: 53px;
  max-width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

/* Figma 483:711 — views number: 11px, #adb5bd, tracking 0.0645px
   Initially hidden so orphaned text never shows before JS populates the count */
.conf-list-row__views {
  display: none;          /* JS adds --visible when views > 0 (md+ only) */
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  letter-spacing: 0.0645px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .conf-list-row__views.conf-list-row__views--visible {
    display: inline-flex;
  }
}

.conf-list-row__chevron {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.conf-list-row__chevron:hover { color: var(--color-text-secondary); }

/* "View →" text link for session list rows */
.conf-list-row__view-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  color: var(--color-text-body);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-bg-page);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.conf-list-row__view-link:hover {
  background: var(--color-neutral-700);
  color: var(--color-on-primary);
  border-color: var(--color-neutral-700);
  text-decoration: none;
}

/* ── Session rows (Figma 483-694): title block left, stats + chevron at row end ── */
.conf-list-row--session {
  align-items: center;
  gap: 12px;
  min-height: 60px;
}

.conf-list-row--session .conf-list-row__info {
  flex: 0 0 75%;
  width: 75%;
  max-width: 75%;
  overflow: visible;
}

.conf-list-row--session .conf-list-row__title-line {
  flex-wrap: wrap;
  align-items: flex-start;
}

.conf-list-row--session .conf-list-row__title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.conf-list-row--session .conf-list-row__authors,
.conf-list-row--session .conf-list-row__conf-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.conf-list-row--session .conf-list-row__authors i {
  font-size: var(--font-size-card-icon);
}

/* Track rows: info fills row; title wraps within space before pill + chevron */
.conf-list-row--track {
  align-items: flex-start;
  gap: 12px;
  min-height: 60px;
  min-width: 0;
}

.conf-list-row--track .conf-list-row__info {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  overflow: hidden;
}

/* No middle spacer — title block uses space up to the chevron */
.conf-list-row--track .conf-list-row__abstract {
  display: none;
}

.conf-list-row--track .conf-list-row__title-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.conf-list-row--track .conf-list-row__title {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  white-space: normal;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.conf-list-row--track .conf-list-row__article-count {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

.conf-list-row--track .conf-list-row__meta {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0;
}

.conf-list-row--track .conf-list-row__track-desc {
  width: 100%;
  margin-top: 2px;
}

.conf-list-row--track .conf-list-row__track-desc .cdp-paper-card__track-desc-text {
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.0645px;
  line-height: 15px;
}

.cdp-paper-card__meta--session-desc {
  align-items: flex-start;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: var(--font-size-card-badge);
}

.cdp-sess-desc-html {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.cdp-sess-desc-html > :first-child {
  margin-top: 0;
}

.cdp-sess-desc-html > :last-child {
  margin-bottom: 0;
}

.cdp-sess-desc-html--clamp {
  /* max-height + overflow is the only approach that reliably constrains height
     when the description contains HTML block elements (<p>, <ul>, <table>, etc.).
     -webkit-line-clamp fails with block children and prevents max-height from
     working correctly, so we use a simple height cap instead.
     12px font × 1.45 line-height × 3 lines ≈ 52px. */
  max-height: 52px;
  overflow: hidden;
}

.conf-list-row--session .conf-list-row__session-desc {
  width: 100%;
  margin-top: 2px;
}

.conf-list-row--session .conf-list-row__session-desc .cdp-paper-card__meta {
  width: 100%;
  font-size: var(--font-size-card-badge);
}

.cdp-paper-card__meta--track {
  align-items: flex-start;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: var(--font-size-card-badge);
}

.cdp-paper-card__track-desc {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.cdp-paper-card__track-desc-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.cdp-paper-card__track-desc-body {
  min-width: 0;
  flex: 1;
}

.cdp-paper-card__track-desc-text {
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cdp-paper-card__track-desc-toggle {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  color: var(--cdp-color-reset-btn);
  cursor: pointer;
  line-height: 1.4;
}

.cdp-paper-card__track-desc-toggle:hover {
  text-decoration: underline;
}

/* Media tags inline on title row after papers pill */
.conf-list-row--session .conf-list-row__title-line .conf-list-row__content-types {
  flex-shrink: 0;
  margin-top: 0;
}

/* Empty flex-1 column — pushes .conf-list-row__meta to the far right */
.conf-list-row--session .conf-list-row__session-spacer {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.conf-list-row--session .conf-list-row__meta {
  flex: 0 0 auto;
  min-width: 53px;
  max-width: none;
  margin-left: 0;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.conf-list-row--session .conf-list-row__chevron {
  display: flex;
}

/* Session cards: full title, no line-clamp */
.cdp-paper-card--session .cdp-paper-card__title {
  display: block;
  overflow: visible;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* ── Responsive: simplify on mobile ──────────────────────────── */
@media (max-width: 767px) {
  .conf-list-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
  }

  .conf-list-row__divider { display: none; }

  .conf-list-row__info {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  .conf-list-row--session .conf-list-row__info {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .conf-list-row--track .conf-list-row__info {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .conf-list-row--session .conf-list-row__session-spacer {
    display: none;
  }

  .conf-list-row--session .conf-list-row__meta {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .conf-list-row__abstract {
    width: 100%;
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }

  .conf-list-row__meta { width: auto; margin-left: auto; }
}


/* ================================================================
   Conference Hero Banner  (Figma node 79-12338 / 95-564 / 72-1848)
   Layout / spacing / flex: Bootstrap utilities in _conf_hero_banner.cfm
   CSS here: gradient shell, typography, pill chrome, truncation bounds
   ================================================================ */
.conf-hero-banner {
  background: linear-gradient(174.35deg, var(--color-text) 0%, var(--color-neutral-700) 100%);
  border-bottom: 1px solid var(--color-border);
}

/* text-truncate bounds (BS 5.2 has no mw-* for 180px / 320px) */
.conf-hero-banner__breadcrumb,
.conf-hero-banner__left,
.conf-hero-banner__meta,
.conf-hero-banner__bc-current,
.conf-hero-banner__bc-link {
  min-width: 0;
}

/* BS 5.2 has no w-md-auto — stats div stays full-width without this override.
   Shrink to pill content width at md+ so justify-content-between pushes it to the
   right edge. Pills may wrap to a second line inside this column until lg
   (flex-lg-nowrap in _conf_hero_banner.cfm) so iPad portrait doesn't overflow. */
@media (min-width: 768px) {
  .conf-hero-banner__stats {
    width: auto !important;
  }
}


.conf-hero-banner__breadcrumb a,
.conf-hero-banner__breadcrumb .conf-hero-banner__bc-link {
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.12s;
}

.conf-hero-banner__breadcrumb a:hover,
.conf-hero-banner__breadcrumb .conf-hero-banner__bc-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.conf-hero-banner__bc-current,
.conf-hero-banner__bc-link {
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  max-width: 180px;
}

@media (min-width: 576px) {
  .conf-hero-banner__bc-current,
  .conf-hero-banner__bc-link {
    max-width: 320px;
  }
}

.conf-hero-banner__bc-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--font-size-card-badge);
  line-height: 18px;
}

.conf-hero-banner__badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.62px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 15px;
}

.conf-hero-banner__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .conf-hero-banner__title {
    font-size: var(--font-size-xl);
  }
}

.conf-hero-banner__date,
.conf-hero-banner__location {
  font-size: var(--font-size-card-meta);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.08px;
}

.conf-hero-banner__date .icon--size-md,
.conf-hero-banner__location .icon--size-md {
  color: rgba(255, 255, 255, 0.5);
}

.conf-hero-banner__doi {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.08px;
}

.conf-hero-banner__doi .icon--size-md {
  color: rgba(255, 255, 255, 0.4);
}

.conf-hero-banner__doi-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.12s;
}

.conf-hero-banner__doi-link:hover {
  color: #fff;
  text-decoration: underline;
}

.conf-hero-banner__img {
  max-height: 56px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  margin-top: 2px;
}

@media (max-width: 575.98px) {
  .conf-hero-banner__img {
    max-height: 48px;
    max-width: min(100%, 200px);
  }
}

.conf-hero-banner__stat {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 14px;
  height: 36px;
  font-size: var(--font-size-card-meta);
  font-weight: 500;
  color: var(--color-on-primary);
  letter-spacing: -0.08px;
  white-space: nowrap;
}

.conf-hero-banner__stat i {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
}

/* Article card variant — top accent bar suppressed via ::before */
.cdp-paper-card--article::before {
  display: none; /* suppress any coloured top-bar from the base card */
}

/* Card footer — author row (avatar · name · company) */
.cdp-paper-card__footer-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

#cdal-card-view .cdp-paper-card__footer-author {
  align-items: center;
}

/* Top-align avatar with name+company when both rows are shown (sm+; company is d-none below sm) */
@media (min-width: 576px) {
  #cdal-card-view .cdp-paper-card__footer-author:has(.cdp-paper-card__footer-company) {
    align-items: flex-start;
  }
}

/* Card/list — authors in one horizontal row; left-aligned, truncate only when row overflows */
.cdp-authors-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.cdp-authors-inline--card-footer {
  align-items: flex-start;
}

.cdp-author-inline-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
}

.cdp-author-inline-item .cdal-author-avatar {
  flex-shrink: 0;
}

.cdp-author-inline-item__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
}

.cdp-author-inline-item__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary, #334155);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdp-author-inline-item__company {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.05px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdp-authors-inline--list .cdp-author-inline-item__name {
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  color: var(--color-text-muted);
}

.cdp-authors-inline--list .cdp-author-inline-item__company {
  font-size: 10px;
}

#cdal-card-view .cdp-paper-card__footer:has(.cdp-authors-inline) {
  align-items: center;
  min-height: 0;
}

.cdp-authors-inline--card-footer .cdal-author-avatar {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

.cdp-authors-inline--list .cdal-author-avatar,
.conf-list-table--article-list .conf-list-row__author-block .cdal-author-avatar {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

.cdp-authors-inline--card-footer .cdp-author-inline-item__name {
  font-size: 10px;
}

.cdp-authors-inline--card-footer .cdp-author-inline-item__company {
  font-size: 9px;
}

.cdp-authors-inline__more {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted, #9ca3af);
  white-space: nowrap;
  line-height: 1.3;
  cursor: default;
}

.cdp-authors-inline--list .cdp-authors-inline__more {
  font-size: var(--font-size-article-meta, 11px);
  font-weight: 400;
}

/* Author kickout — fixed panel on hover (replaces native title tooltips) */
.cdp-author-inline-item[data-author-kickout-trigger],
.cdp-authors-inline__more[data-author-kickout-trigger],
.cdp-paper-card__footer-authors[data-author-kickout-trigger],
.conf-list-row__authors[data-author-kickout-trigger] {
  cursor: default;
}

.cdp-author-kickout {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.cdp-author-kickout.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cdp-author-kickout__panel {
  background: var(--color-bg-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  padding: 8px 10px;
  max-width: min(320px, calc(100vw - 16px));
}

.cdp-author-kickout__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cdp-author-kickout__row + .cdp-author-kickout__row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.cdp-author-kickout__avatar-wrap {
  flex-shrink: 0;
}

.cdp-author-kickout__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17px;
  color: var(--color-on-primary, #fff);
  flex-shrink: 0;
}

.cdp-author-kickout__avatar--img {
  object-fit: cover;
  background: #9faab3;
}

.cdp-author-kickout__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cdp-author-kickout__name {
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  color: var(--color-text-primary, #334155);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.cdp-author-kickout__company {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.cdp-author-kickout__profile-link {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--font-size-article-meta, 11px);
  font-weight: 500;
  color: var(--color-link, #1e40af);
  text-decoration: none;
}

.cdp-author-kickout__profile-link:hover {
  text-decoration: underline;
}

/* 2-line clamp backstop for single-line name-only mode — full author list in kickout */
#cdal-card-view .cdp-paper-card__footer-authors {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.35;
}

.cdp-paper-card__footer-author--empty {
  min-height: 0;
}

.cdp-paper-card__footer-author-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 0 1 auto;
}

.cdp-paper-card__footer-company {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.05px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 32px avatars on conference article card/list (not scoped to .view-article) */
.cdal-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17px;
  color: var(--color-on-primary);
  background: var(--color-text-secondary);
  flex-shrink: 0;
}

.cdal-author-avatar--img {
  object-fit: cover;
  background: #9faab3;
}

.cdal-author-avatar--initials {
  line-height: 1;
}

/* Footer author list — matches Figma 89:92 footer layout */
.cdp-paper-card__footer-authors {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  letter-spacing: 0.0645px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cdp-paper-card__footer-authors--empty {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   Chip row  (Row A)  —  Tag · Session type · Media badges
   Used on both card and list views.
   ══════════════════════════════════════════════════════════════ */
.cdp-chip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* List row: sits below the author block, slightly tighter top gap.
   Never wraps — overflowing chips clip so rows stay flat (plan Item 4). */
.cdp-chip-row--list {
  margin-top: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Base chip */
.cdp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cdp-chip-inner-gap);
  padding: var(--cdp-chip-padding-y) var(--cdp-chip-padding-x);
  border: 1px solid transparent;
  border-radius: var(--cdp-chip-border-radius);
  font-size: var(--cdp-chip-font-size);
  font-weight: var(--cdp-chip-font-weight);
  line-height: var(--cdp-chip-line-height);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tag / track / session-type text chips — full label in title tooltip.
   .cdp-chip is inline-flex + flex-shrink:0 (breaks ellipsis in flex rows). */
.cdp-chip--tag,
.cdp-chip--type,
.cdp-paper-card__track-badge.cdp-chip {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdp-chip--tag {
  background: #f5f3ff;
  color: #6366f1;
  border-color: #e9e5ff;
  max-width: 240px;
}

/* Session type chip — neutral slate */
.cdp-chip--type {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  max-width: 110px;
}

/* Media badges */
.cdp-chip--video  { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.cdp-chip--poster { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.cdp-chip--attach { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cdp-chip--views     { background: var(--color-bg-muted); color: var(--color-text-secondary); border-color: var(--color-border); }
.cdp-chip--downloads { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
/* Count pill — article / session / publication count next to titles */
.cdp-chip--count { background: #eaf4fd; color: #1d6fb5; border-color: #bfdbfe; font-weight: 500; }

.cdp-chip i { font-size: var(--font-size-card-badge); flex-shrink: 0; }

/* Year — plain text trailing the chip row, no pill (still used by search_results_list.cfm) */
.cdp-chip-year {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 400;
  align-self: center;
  padding-left: 1px;
  white-space: nowrap;
}

/* Icon-only media badge (Video/Poster/Paper/Attachment) — label in title/aria-label.
   Pin the icon box to the chip line-height so .app-icon's height:1.1em cannot
   push the chip taller than text chips (which are height = 2px*2 + 12px + 2px border = 18px). */
.cdp-chip--icon-only {
  padding: var(--cdp-chip-padding-y) var(--cdp-chip-padding-x-icon);
}

.cdp-chip--icon-only .app-icon,
.cdp-chip--icon-only i {
  font-size: var(--cdp-chip-line-height);
  width: var(--cdp-chip-line-height);
  min-width: var(--cdp-chip-line-height);
  height: var(--cdp-chip-line-height);
}

/* Merged meta line (Session · Conference · Year) — layout via Bootstrap utilities
   in markup; BS 5.2 has no min-w-0 utility, so the flex truncation hooks live here.
   text-secondary (= #6c757d) provides the color; 11px matches the old session line. */
.cdp-meta-merged {
  min-width: 0;
  margin-top: 5px;
  font-size: var(--font-size-article-meta);
}

.cdp-meta-merged > .text-truncate {
  min-width: 0;
}

.cdp-meta-merged i {
  font-size: var(--font-size-card-icon);
  color: var(--color-text-muted);
}

/* Phone: smaller avatars + tighter article list rows */
@media (max-width: 575.98px) {
  .cdal-author-avatar {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .conf-list-table--article-list .conf-list-row {
    padding: 8px 10px;
  }
}

/* iPad portrait (2-col cards): cap the chip row at ~2 lines */
@media (min-width: 768px) and (max-width: 991.98px) {
  #cdal-card-view .cdp-chip-row {
    max-height: 48px;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════
   Session line  (Row B)  —  icon + session name, truncates
   ══════════════════════════════════════════════════════════════ */
.cdp-session-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-secondary);
  margin-top: 5px;
  min-width: 0;
}

.cdp-session-line i {
  font-size: var(--font-size-card-icon);
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.cdp-session-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   Meta line  (Row C)  —  Conference · Year, very light
   ══════════════════════════════════════════════════════════════ */
.cdp-meta-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-article-meta);
  color: var(--color-text-secondary);
  margin-top: 5px;
  min-width: 0;
}

.cdp-meta-line i {
  font-size: var(--font-size-card-icon);
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.cdp-meta-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Grouped article card: meta under title (Figma 89:108) */
.cdp-paper-card--article .cdp-paper-card__meta--article {
  margin-top: 6px;
}


.cdp-paper-card--article .cdp-paper-card__title {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Session Video + Children  (svc-*)
   Figma: nodes 500:29 · 500:153 · 500:31
   contentShape = "video_and_children"
   Layout: full-width header bar  +  two-column body (main + sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header bar ──────────────────────────────────────────────────────────── */
.svc-header {
  background: rgba(51, 65, 85, 0.03);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}
.svc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-header__breadcrumb .breadcrumb {
  font-size: var(--font-size-article-meta);
  margin: 0;
  color: var(--color-text-muted);
}
.svc-header__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }
.svc-header__breadcrumb .breadcrumb-item.active { color: var(--color-text-body); font-weight: 500; }
.svc-header__session-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: #16a34a;
  color: var(--color-on-primary);
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
  flex-shrink: 0;
  white-space: nowrap;
}
.svc-header__session-name { font-size: var(--font-size-card-badge); font-weight: 600; color: #16a34a; }
.svc-header__count        { font-size: var(--font-size-article-meta); color: var(--color-text-muted); }
.svc-header__with-video-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-neutral-700);
  color: var(--color-on-primary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17px;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* ── Session consumption page shell (Figma 500:29) ─────────────────────── */
.svc-page {
  max-width: 1429px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-bottom: 48px;
  margin-bottom: 24px;
}

/* Inside .masthead-shell: shell owns horizontal gutters; page is full width within it */
.masthead-shell > .svc-page {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.svc-page-body {
  width: 100%;
}

/* ── Body: two-column flex ───────────────────────────────────────────────── */
.svc-body {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 420px;
  min-width: 0;
}
.svc-main {
  flex: 1 1 0;
  width: 0; /* flex grow from remaining space, not content width */
  padding: 24px 0;
  min-width: 0;
  min-height: 0;
}
.svc-sidebar {
  width: 348px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .svc-body {
    align-items: flex-start;
    gap: 24px;
  }
  .svc-main {
    min-width: calc(100% - 349px - 24px);
  }
  .sco-layout .svc-sidebar {
    width: 349px;
  }
  .sco-layout .svc-main {
    min-width: calc(100% - 349px - 24px);
  }
  /*
   * Sticky sidebar: flex-start on .svc-body lets main content set row height;
   * max-height caps the column; playlist scrolls inside .svc-sidebar__list.
   */
  .svc-body .svc-sidebar {
    position: sticky;
    top: 16px;
    align-self: stretch;
    max-height: calc(100vh - 16px - 96px);
    margin-bottom: 48px;
  }
  .svc-sidebar__list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ── Previous/Next navigation ────────────────────────────────────────────── */
.svc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.svc-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: var(--font-size-article-meta);
  font-weight: 500;
  color: var(--color-text-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.svc-nav__btn:hover:not([disabled]) { background: var(--color-bg-muted); color: var(--color-text-body); }
.svc-nav__btn--disabled             { opacity: 0.3; cursor: default; }
.svc-nav__counter                   { font-size: var(--font-size-article-meta); color: var(--color-text-muted); }

/* ── Panel switching ─────────────────────────────────────────────────────── */
#svc-panels { position: relative; }
.svc-panel   { display: none; }
.svc-panel--active { display: block; }

/* ── Article CTA (view full article button) ──────────────────────────────── */
.svc-article-cta { margin-top: 24px; }
.svc-article-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #1e40af;
  color: #fff;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
.svc-article-cta__btn:hover { background: #1d4ed8; color: #fff; }
.svc-info__title-link        { color: inherit; text-decoration: none; }
.svc-info__title-link:hover  { color: #1e40af; }

/* ── Video player ────────────────────────────────────────────────────────── */
.svc-player {
  position: relative;
  width: 100%;         /* fill full main-column width */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  background: linear-gradient(158.5deg, var(--color-text) 6%, var(--color-neutral-700) 54%, rgba(22, 163, 74, 0.8) 94%);
  min-height: 520px;  /* Figma: 572px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.svc-player__pill {
  position: absolute;
  top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-on-primary);
}
.svc-player__pill--label {
  left: 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.svc-player__pill--duration {
  right: 14px;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 500;
}
.svc-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  cursor: pointer;
}
.svc-player__play-btn {
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  font-size: 22px;
  color: var(--color-text-body);
  padding-left: 4px;
  transition: transform 0.15s;
}
.svc-player__play-btn:hover { transform: scale(1.08); }
.svc-player__overlay-title {
  color: var(--color-on-primary);
  font-size: var(--font-size-card-title);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  margin: 0;
}
.svc-player__overlay-authors {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-card-badge);
  text-align: center;
  margin: 0;
}
.svc-player__iframe-wrap,
.svc-player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* The <iframe> inside the Vimeo wrap must fill its absolutely-positioned container */
.svc-player__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.svc-player__iframe-wrap--hidden,
.svc-player__video--hidden { display: none; }

/* ── Session info (below player) ─────────────────────────────────────────── */
.svc-info__title  { font-size: 20px; font-weight: 600; color: var(--color-text-body); margin-bottom: 8px; }
.svc-info__tags   { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
}
.svc-tag--track { background: rgba(22, 163, 74, 0.08); color: #16a34a; }
.svc-tag--video { background: #f0fdf4; color: #16a34a; }
.svc-info__divider { border-color: var(--color-border); margin: 12px 0; }

/* Authors */
.svc-authors { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-author-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(51, 65, 85, 0.04);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 200px;
}

a.svc-author-card,
a.svc-author-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

a.svc-author-card:hover,
a.svc-author-card--link:hover {
  background: rgba(51, 65, 85, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

a.svc-author-card:hover .svc-author-card__name,
a.svc-author-card--link:hover .svc-author-card__name {
  color: var(--primary-color, #1e40af);
  text-decoration: underline;
}
.svc-author-card__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-on-primary);
  flex-shrink: 0;
}
.svc-author-card__info        { display: flex; flex-direction: column; gap: 2px; }
.svc-author-card__name        { font-size: var(--font-size-article-meta); font-weight: 600; color: var(--color-text-body); }
.svc-author-card__affiliation { font-size: 10px; color: var(--color-text-body); line-height: 1.3; }

/* Tabs */
.svc-tabs { display: flex; gap: 0; }
.svc-tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: var(--font-size-card-meta);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.svc-tabs__tab--active { border-bottom-color: var(--color-neutral-700); color: var(--color-text-body); }
.svc-tabs__tab .app-icon {
  font-size: var(--font-size-card-icon);
  line-height: 1;
}

/* Abstract */
.svc-abstract { font-size: var(--font-size-sm); color: var(--color-text-body); line-height: 1.7; }

/* Open-article link inside sidebar item body */
.svc-sidebar__item-open {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.1px;
  transition: color 0.15s;
}
.svc-sidebar__item:hover .svc-sidebar__item-open,
.svc-sidebar__item--active .svc-sidebar__item-open { color: #1e40af; }
.svc-sidebar__item-open:hover { color: #1d4ed8; text-decoration: underline; }

/* Open-article label — sits below author chips, above description tabs */
.svc-art-open-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  font-size: var(--font-size-card-badge);
  font-weight: 500;
  color: var(--color-text-body);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.svc-art-open-label:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ── Attachment file list ────────────────────────────────────────────────── */
.svc-attach-list { display: flex; flex-direction: column; gap: 8px; }
.svc-attach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 15px;
  background: var(--color-bg-surface);
}
.svc-attach-item__badge {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-on-primary);
  letter-spacing: 0.17px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.svc-attach-item__info  { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.svc-attach-item__name  { font-size: var(--font-size-card-meta); font-weight: 500; color: var(--color-text); }
.svc-attach-item__name a { color: var(--color-text); text-decoration: none; }
.svc-attach-item__name a:hover { color: #1e40af; text-decoration: underline; }
.svc-attach-item__size  { font-size: var(--font-size-article-meta); color: var(--color-text-muted); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.svc-sidebar__counter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 16px;
  flex-shrink: 0;
}
.svc-sidebar__counter-btns { display: flex; gap: 2px; }
.svc-sidebar__arrow {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-body);
  font-size: 10px;
  text-decoration: none;
}
.svc-sidebar__arrow--disabled { opacity: 0.3; cursor: default; }
.svc-sidebar__arrow:hover:not(.svc-sidebar__arrow--disabled) { background: var(--color-bg-muted); }

/* Playlist */
.svc-sidebar__list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.svc-sidebar__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 11px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  color: inherit;
}
.svc-sidebar__item--link:hover { background: var(--color-bg-muted); }
.svc-sidebar__item--active     { background: rgba(51, 65, 85, 0.03); }
.svc-sidebar__item-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-neutral-700);
  border-radius: 0 2px 2px 0;
}
.svc-sidebar__item-num {
  font-family: 'Menlo', 'Courier New', monospace;
  font-size: 10px;
  color: var(--color-border-strong);
  line-height: 2.5;
  flex-shrink: 0;
  width: 14px;
}
.svc-sidebar__item--active .svc-sidebar__item-num { color: var(--color-text-body); }
.svc-sidebar__item-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-sidebar__item-title {
  font-size: var(--font-size-card-badge);
  font-weight: 400;
  color: var(--color-text-body);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-sidebar__item--active .svc-sidebar__item-title { font-weight: 600; color: var(--color-text-body); }
.svc-sidebar__item-main-badge {
  display: inline-block;
  background: var(--color-neutral-700);
  color: var(--color-on-primary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17px;
  padding: 2px 10px;
  border-radius: 9999px;
  margin-top: 2px;
  width: fit-content;
}
.svc-sidebar__item-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.12px;
}
.svc-sidebar__item-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}
.svc-sidebar__item-icon .app-icon {
  font-size: var(--font-size-card-icon);
  line-height: 1;
}
.svc-sidebar__item-icon--active { background: var(--color-neutral-700); color: var(--color-on-primary); }
.svc-sidebar__item-icon--active .app-icon {
  color: var(--color-on-primary) !important;
}

/* Sidebar footer */
.svc-sidebar__footer {
  padding: 9px 14px;
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.svc-sidebar__footer-duration { font-size: 10px; font-weight: 500; color: var(--color-text-secondary); }
.svc-sidebar__footer-track {
  font-size: 9px;
  font-weight: 600;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.07);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.17px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHILDREN-ONLY LAYOUT — Blue theme overrides (.sco-* + blue modifiers)
   Figma: 500:987 (page), 500:1023 (main panel), 531:848 (author chip)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page shell */
.sco-layout {
  max-width: 1458px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 24px;
}

.sco-page-header {
  background: rgba(51, 65, 85, 0.03);
  border-bottom: 1px solid var(--color-border);
}

.sco-page-header__inner {
  max-width: 1458px;
  margin: 0 auto;
  padding: 12px 32px 11px;
}

.sco-breadcrumb {
  padding: 0;
}

.sco-page-body.svc-page {
  max-width: 1429px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.sco-page-body .svc-body {
  width: 100%;
}

/* Author chips — tighter chip per Figma 531:848 */
.sco-layout .svc-authors {
  gap: 7px;
  margin-bottom: 20px;
}

.sco-layout .svc-author-card {
  gap: 7px;
  padding: 8px 10px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.1);
}

/* Main panel typography (Figma 500:1023) */
.sco-layout .svc-abstract {
  font-size: var(--font-size-card-meta);
  line-height: 22px;
  color: var(--color-text-body);
  letter-spacing: -0.0762px;
}

.sco-layout .svc-tabs {
  margin-bottom: 20px !important;
}

/* Sidebar accent bar — slate on active item (not blue) per Figma 500:1192 */
.sco-layout .svc-sidebar__item-accent--blue {
  background: var(--color-neutral-700);
}

/* Sidebar width matches Figma 500:1162 */
.sco-layout .svc-sidebar {
  width: 349px;
}

/* Header — blue badge + name */
.svc-header__badge--blue              { background: #1d4ed8; }
.svc-header__session-name--blue       { color: #1d4ed8; }
.svc-header__breadcrumb-current       { color: #1d4ed8; font-weight: 500; }

/* NO VIDEO pill (blue-tinted border) */
.svc-header__no-video-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.25);
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.17px;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* Sidebar — blue accent */
.svc-sidebar__item-accent--blue           { background: #1d4ed8; }
.svc-sidebar__item-icon--blue             { background: var(--color-neutral-700); color: var(--color-on-primary); }
.svc-sidebar__footer-track--blue {
  background: rgba(29, 78, 216, 0.07);
  color: #1d4ed8;
}

/* Article detail panel */
.sco-article__title {
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.56px;
  line-height: 1.25;
  margin-bottom: 11px;
}
.sco-article__title-link  { color: inherit; text-decoration: none; }
.sco-article__title-link:hover { color: #1d4ed8; }

/* Publication metadata bar (Figma 500:1023 footer grid) */
.sco-meta-bar   { border-color: var(--color-border) !important; }
.sco-meta-row   { display: flex; flex-wrap: wrap; gap: 16px; }
.sco-meta-row--primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sco-meta-row--secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media (min-width: 768px) {
  .sco-meta-row--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sco-meta-item  { display: flex; flex-direction: column; gap: 3px; min-width: 100px; }
.sco-meta-item__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.62px;
}
.sco-meta-item__value { font-size: var(--font-size-card-badge); font-weight: 500; color: var(--color-text-body); }
.sco-meta-item__link  { color: var(--color-text-body); text-decoration: none; }
.sco-meta-item__link:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .svc-body    { flex-direction: column; }
  .svc-main    { width: 100%; min-width: 0; }
  .svc-sidebar {
    width: 100%;
    border-left: none !important;
    border-top: 1px solid var(--color-border);
    position: static;
    max-height: none;
    margin-bottom: 32px;
  }
}
@media (max-width: 767px) {
  .sco-page-header__inner { padding: 12px 16px 8px; }
  .sco-layout .svc-main   { padding: 16px; }
  .sco-article__title     { font-size: 18px; }
  .svc-main                { padding: 16px 0; }
  .svc-player              { min-height: 240px; }
  .svc-player__play-btn    { width: 52px; height: 52px; font-size: 18px; }
  .svc-player__overlay-title { font-size: var(--font-size-card-meta); }
  .svc-info__title         { font-size: 16px; }
  .svc-header__session-info { display: none; }
  .svc-author-card         { min-width: 160px; }
}

/* ==========================================================================
   VIDEO-ONLY layout  (.svo-*)
   Figma: 532:982 — single-column article detail with video, no sidebar
   ========================================================================== */

/* Page wrapper — matches the 28px gutter from Figma */
.svo-page {
  max-width: 1072px;
  margin: 0 auto;
  padding: 24px 28px 48px;
}

/* Breadcrumb */
.svo-breadcrumb { margin-bottom: 16px; }
.svo-breadcrumb .breadcrumb { font-size: var(--font-size-article-meta); color: var(--color-text-muted); }
.svo-breadcrumb .breadcrumb-item a { color: var(--color-text-muted); text-decoration: none; }
.svo-breadcrumb .breadcrumb-item a:hover { color: var(--color-text-secondary); }
.svo-breadcrumb .breadcrumb-item.active { color: var(--color-text-secondary); }
.svo-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* Session context bar — badge + session title + dot + track (Figma 532:998) */
.svo-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.svo-context__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1e40af;
  font-size: var(--font-size-card-badge);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  min-width: 28px;
  white-space: nowrap;
}
.svo-context__session-name {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 480px;
}
.svo-context__sep {
  color: var(--color-border-strong);
  font-size: 10px;
}
.svo-context__track {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Article title */
.svo-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.56px;
  margin-bottom: 8px;
  max-width: 780px;
}

/* Conference subtitle */
.svo-conf-subtitle {
  font-size: var(--font-size-card-badge);
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* Video player override — full width for video_only layout */
.svo-player {
  width: 100%;
  min-height: 520px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Abstract body text — video_only scoped override (Figma 532:1350 = 13px/22px) */
.svo-page .svc-abstract {
  font-size: var(--font-size-card-meta);
  line-height: 22px;
  letter-spacing: -0.08px;
  max-width: 991px;
}

/* ── Responsive for video-only ── */
@media (max-width: 767px) {
  .svo-page              { padding: 16px; }
  .svo-title             { font-size: 18px; }
  .svo-player            { min-height: 220px; }
  .svo-context__session-name { max-width: 200px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .svo-page  { padding: 20px 24px; }
  .svo-title { font-size: 20px; }
  .svo-player { min-height: 380px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Direct Article List — Card / List view toggle  (cdal-*)
   Centered in .conf-controls-bar--zoned; reuses .st-toggle segmented control
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile: hide toggle below 480px (list is best on small screens) */
@media (max-width: 480px) {
  .cdal-view-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Session viewer — shared breadcrumb  (video_and_children + children_only)
   Figma 523:375, 531:37: plain breadcrumb replaces full-width header banner
   ═══════════════════════════════════════════════════════════════════════════ */

.svc-breadcrumb {
  padding: 16px 0 12px;
  background: transparent;
}

.svc-breadcrumb .breadcrumb {
  font-size: var(--font-size-article-meta);
  color: var(--color-text-muted);
  gap: 2px;
}

.svc-breadcrumb .breadcrumb-item a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.svc-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-text-body);
}

.svc-breadcrumb .breadcrumb-item.active {
  color: var(--color-text-secondary);
}

/* ── Panel title row (H1 + view/download chips) ── */
.svc-panel__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.svc-panel__title-row .svc-panel__title {
  margin-bottom: 0;
}

.svc-panel__stats {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-start;
  padding-top: 4px;
  max-width: 42%;
}

.svc-panel__stats .cdp-chip .app-icon {
  font-size: var(--font-size-card-badge);
  width: 1em;
  min-width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.svc-panel__stats .cdp-chip--views {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.svc-panel__stats .cdp-chip--downloads {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

/* ── Panel title (H1 inside svc-panel, Figma 523:375) ── */
.svc-panel__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.56px;
  color: var(--color-text);
  margin: 0 0 12px;
  flex: 1;
  min-width: 0;
}

.svc-panel__title-link {
  color: inherit;
  text-decoration: none;
}

.svc-panel__title-link:hover {
  color: var(--cdp-color-session-accent, var(--color-text-body));
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
  .svc-page      { padding: 0 16px; }
  .svc-breadcrumb { padding: 12px 0 8px; }
  .svc-panel__title-row {
    flex-direction: column;
    gap: 8px;
  }
  .svc-panel__stats {
    max-width: 100%;
    justify-content: flex-start;
    padding-top: 0;
  }
  .svc-panel__title { font-size: 18px; }
}

/* ============================================================
   Category view_all / tag article list
   ============================================================ */

.category-view-all-page {
  padding-top: 0.5rem;
}

.category-view-all__breadcrumb-wrap {
  margin-bottom: 0.75rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb {
  min-width: 0;
  max-width: 100%;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb {
  font-size: var(--font-size-article-meta, 0.6875rem);
  line-height: 16.5px;
  letter-spacing: 0.0644531px;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb__list {
  margin-bottom: 0 !important;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-height: 16.5px;
  min-width: 0;
  max-width: 100%;
  background: transparent;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

.category-view-all__breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
  content: "" !important;
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  margin: 0 4px;
  padding: 0 !important;
  float: none;
  vertical-align: middle;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' stroke='%239CA3AF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb__link {
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb__item:first-child .article-view-breadcrumb__link {
  max-width: none;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb__link:hover {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

.category-view-all__breadcrumb-wrap .article-view-breadcrumb__current {
  color: var(--color-text-secondary);
  font-weight: 500;
  display: inline-block;
  max-width: min(100%, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.category-view-all__breadcrumb-wrap .breadcrumb-item.active {
  color: var(--color-text-secondary);
}

@media (max-width: 767.98px) {
  /* Full track/session title is in the h1 — hide redundant long active segment on narrow screens */
  .category-view-all__breadcrumb-wrap .breadcrumb-item.active {
    display: none !important;
  }

  .category-view-all__breadcrumb-wrap .article-view-breadcrumb__list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .category-view-all__breadcrumb-wrap .breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
  }

  .category-view-all__breadcrumb-wrap .article-view-breadcrumb__link {
    max-width: none;
  }
}

.category-view-all__intro {
  margin-bottom: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.category-view-all__intro-inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.category-view-all__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.category-view-all__description {
  min-width: 0;
}

.category-view-all__description-text {
  font-size: var(--font-size-card-meta);
  line-height: 1.625;
  letter-spacing: -0.05px;
  color: var(--color-text-secondary);
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.category-view-all__read-more {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.category-view-all__read-more:hover,
.category-view-all__read-more:focus-visible {
  color: var(--primary-color);
  text-decoration: underline;
  background: none;
  box-shadow: none;
}

.category-view-all__read-more:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  outline-offset: 2px;
}

.category-view-all__summary .search-results-sumary strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Sidebar + main column layout */
.category-view-all__body {
  margin-top: 0.25rem;
}

.category-view-all-page > .conf-controls-bar--zoned {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.75rem;
}

.category-view-all-page .category-view-all-sidebar {
  margin-bottom: 0;
  padding-right: 1rem;
}

.category-view-all-page .category-view-all__main {
  min-width: 0;
}

.category-view-all-page .category-view-all__cards {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .category-view-all-page .category-view-all-sidebar {
    padding-right: 0;
    margin-bottom: 0.75rem;
  }
}

/* Filter bar: search + filter left · result count + display right */
.category-view-all-page .conf-controls-bar--category-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-view-all-page .conf-controls-bar__leading {
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  gap: 10px;
}

.category-view-all-page .conf-controls-bar__leading .filter-bar__search {
  flex: 1 1 auto;
  min-width: 0;
}

.category-view-all-page .conf-controls-bar__trailing {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  gap: 10px;
}

.category-view-all-page .conf-controls-bar__trailing .conf-controls-bar__display {
  margin-left: 0;
}

/* Controls bar: stack on small screens */
@media (max-width: 767.98px) {
  .category-view-all-page .conf-controls-bar--category-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem;
  }

  .category-view-all-page .conf-controls-bar__leading {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .category-view-all-page .conf-controls-bar__leading .filter-bar__search {
    flex: 1 1 100%;
  }

  .category-view-all-page .conf-controls-bar__trailing {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .category-view-all-page .container-xxl:not(.category-view-all__breadcrumb-wrap) {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .category-view-all-page #cdal-card-view {
    --bs-gutter-y: 0.75rem;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE ADDITIONS  (max-width 991.98px and below)
   All rules below are additive — no existing desktop (>=992px) rules changed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Session viewer: stack playlist sidebar below main content on mobile/tablet -- */
@media (max-width: 991.98px) {
  .svc-body {
    flex-direction: column;
  }
  .svc-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    border-top: 1px solid var(--color-border);
    border-left: none !important;
    margin-top: 1.5rem;
  }
  .svc-sidebar__list {
    flex: none;   /* override global flex:1 1 0 — list collapses to 0 when parent has no defined height */
    height: auto;
    max-height: 300px;
    overflow-y: auto;
  }
}

/* -- Controls bar: larger tap targets + vertical breathing room on mobile -- */
@media (max-width: 767.98px) {
  .conf-controls-bar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .conf-controls-bar .display-order-btn-dp {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    line-height: 36px !important;
  }
}

/* -- Spread the two dropdowns (Order left, Per-page right) on small phones -- */
@media (max-width: 575.98px) {
  .conf-controls-bar .conf-controls-bar__display {
    flex: 1 1 auto;
    justify-content: space-between;
  }
}

/* -- Global track page: scale down very long track titles on phone -- */
@media (max-width: 575.98px) {
  .category-view-all__title {
    font-size: 1.25rem;
  }
}

/* ── Controls bar: allow long count/filter text to wrap on mobile ──
   .conf-controls-bar__count has flex-shrink:0 globally; on mobile the search page
   puts a long "Showing X-Y of Z results for search [filter name]" text in it which
   overflows on narrow screens. Override so it shrinks and the text wraps properly.
   Dropdowns stay on the same row as the count at ≥480px; only wrap below that. */
@media (max-width: 767.98px) {
  .conf-controls-bar .conf-controls-bar__count {
    flex-shrink: 1;
    min-width: 0;
  }
  .conf-controls-bar .conf-controls-bar__count .search-results-sumary {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

/* Dropdowns always stay on the same row as the count — count text wraps within its flex cell */