/**
 * View: Article Detail — Proceedings style
 * Loaded for: article.view  |  item.detail
 * Root class: .view-article  (added to .bg-main-content and .bg-article in detail.cfm)
 *
 * Specificity strategy:
 *   All rules are scoped under .view-article so they outrank index.css single-class rules.
 *   Where index.css uses !important, we match with !important here (loaded later = wins).
 */

@import "_vars.css";

/* ============================================================
   0. BASE — Figma: Inter everywhere on article pages
   Exclude Line Awesome / Bootstrap icons so glyphs still render.
   ============================================================ */

.view-article,
.view-article *:not(code):not(pre):not(.bi):not([class*="bi-"]):not(.la):not(.lab):not(.lar):not([class*="la-"]) {
  font-family: var(--article-font, var(--font-family));
}

/* Fluid sidebar panels — override legacy fixed width */
.view-article .new-width {
  width: 100% !important;
}

/* ============================================================
   1. HERO HEADER BAND  (.bg-main-content)
   ============================================================ */

/* Matches session template background (#F8FAFC) instead of pure white */
.view-article.bg-main-content {
  background: var(--color-bg-page) !important;
  padding: 1.5rem 0 0 !important;
  position: relative;
}

/* Bootstrap container-fluid + nested rows: avoid rare horizontal spill past viewport */
.view-article.container-fluid.bg-main-content {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ============================================================
   2. BACK LINK  (.back-button, .back-link)
   Matches author view: pill/badge style with SVG arrow icon
   ============================================================ */

.view-article .back-button {
  padding-bottom: var(--spacing-sm, 12px);
  margin-top: 0;
}

/* Cancel the 10 px margin-left applied globally via #conference_back_btn in custom.css */
.view-article #conference_back_btn {
  margin-left: 0 !important;
}

.view-article .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.0644531px;
  color: var(--color-text-muted) !important;
  text-decoration: none;
  border: 1px solid var(--article-figma-border, var(--color-border));
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  background: var(--color-bg, var(--color-bg-surface));
  transition: color 0.15s ease, border-color 0.15s ease;
}

.view-article .back-link:hover {
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
}

/* ============================================================
   3. IN-ARTICLE HEADINGS  (.header-article)
   Figma uses Inter at multiple scales — NOT one 1.75rem title everywhere.
   Default: 13px/20 semibold (track lines, UI headings).
   h4: 22px/30 (legacy article title in old header markup).
   ============================================================ */

.view-article .header-article {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta) !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: -0.0761719px !important;
  color: var(--color-text-body) !important;
  margin: 0 0 0.5rem !important;
  word-break: break-word;
  hyphens: auto;
}

/* Legacy article views still use h4 titles — Figma H1 scale */
.view-article h4.header-article {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: -0.557813px !important;
  color: var(--color-text) !important;
}

@media (max-width: 575.98px) {
  .view-article h4.header-article {
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.4px !important;
  }
}

/* ============================================================
   4. META LABEL CHIPS  (.inline-article-header)
   Small uppercase labels: "Conference", "Session", "Track"
   ============================================================ */

.view-article .inline-article-header {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 0.6rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
  margin-top: 0.45rem;
  line-height: 1;
}

/* ============================================================
   5. CONFERENCE / SESSION / TRACK LINKS
   (.article-title, .session-title)
   ============================================================ */

.view-article a.article-title,
.view-article .article-title {
  font-family: var(--article-font, var(--font-family)) !important;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: 600;
  display: block;
  margin-bottom: 0.15rem;
  margin-left: 0 !important;
  line-height: 1.45;
}

.view-article a.article-title:hover {
  text-decoration: underline !important;
  opacity: 0.85;
}

.view-article a.session-title,
.view-article span.session-title,
.view-article .session-title {
  font-family: var(--article-font, var(--font-family)) !important;
  color: var(--color-text-body);
  text-decoration: none !important;
  font-size: var(--font-size-sm);
  font-weight: 400;
  display: block;
  margin-bottom: 0.15rem;
  line-height: 1.45;
}

.view-article a.session-title:hover {
  color: var(--primary-color);
  text-decoration: underline !important;
}

/* ============================================================
   5b. ARTICLE HEADER — Conference pill, buttons right, authors inline
   Conference uses horizontal-card tag style; Cite & Download PDF on right.
   ============================================================ */

/* Conference pill — matches horizontal-card__tag--primary */
.view-article .article-header__conference-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  color: var(--primary-color) !important;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.view-article .article-header__conference-pill:hover {
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

/* Actions (Cite, Download PDF) — flex-shrink-0 keeps them from squashing */
.view-article .article-header__actions {
  margin-left: auto;
}

/* Legacy header: authors on same line with user icon */
.view-article .article-header__authors-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.view-article .article-header__authors-icon::before {
  content: "\f007";
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 0.8rem;
  margin-right: 0.4rem;
}

.view-article .article-header__authors-line {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  margin-left: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 500;
}

/* Session/track spacing in new header */
.view-article .article-header__session,
.view-article .article-header__track {
  font-size: var(--font-size-sm);
}

/* Responsive: stack action buttons on tablet and below */
@media (max-width: 767.98px) {
  .view-article .article-header__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .view-article .article-header__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .view-article .article-header__actions.ms-auto {
    margin-left: 0 !important;
  }

  /* Allow authors line to wrap on small screens instead of scroll */
  .view-article .article-header__authors-line {
    white-space: normal;
    overflow-x: visible;
  }
}

/* ============================================================
   6. ACTION BUTTONS  (Cite This, Download PDF)
   ============================================================ */

/* Cite This & Download PDF — outlined style (not filled) */
.view-article .cite-this,
.view-article .download-pdf {
  background-color: transparent !important;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary) !important;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta);
  line-height: 20px;
  letter-spacing: -0.0761719px;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
  margin-top: 0 !important;
  margin-left: 0 !important;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.view-article .cite-this:hover,
.view-article .download-pdf:hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  background-color: color-mix(in srgb, var(--primary-color) 6%, transparent) !important;
}

/* ============================================================
   7. VIEWS / DOWNLOADS STATS  (.right-header, .papercitation)
   ============================================================ */

.view-article .right-header {
  font-family: var(--article-font, var(--font-family));
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.7rem;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  margin-bottom: 0.35rem;
  white-space: nowrap;
}

.view-article .papercitation {
  font-family: var(--article-font, var(--font-family));
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  letter-spacing: 0.0644531px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.view-article .paper-views::before  { content: "👁 "; }
.view-article .paper-downloads::before { content: "⬇ "; }

/* ============================================================
   8. CONTENT BAND  (.bg-article)
   ============================================================ */

.view-article.bg-article {
  background: var(--color-bg-page) !important;
  padding-top: 0;
  padding-bottom: 3rem;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .view-article.bg-article {
    padding-top: 0;
  }
}

/* ============================================================
   Article layout: main + fixed-width sidebar (Bootstrap 5 grid)
   Horizontal gap: explicit margin on sidebar (not --bs-gutter-x), so main max-width
   stays stable and spacing is predictable (see .article-page-row + .article-page__sidebar).
   ============================================================ */

/* Article canvas: align with .masthead-shell (--site-shell-* in header-footer.css) */
.view-article.bg-main-content > .container,
.view-article.bg-article > .container {
  max-width: var(--site-shell-max-width, 1320px);
  width: 100%;
  min-width: 0;
  padding-left: var(--site-shell-gutter, 32px);
  padding-right: var(--site-shell-gutter, 32px);
}

@media (max-width: 575.98px) {
  .view-article.bg-main-content > .container,
  .view-article.bg-article > .container {
    padding-left: var(--site-shell-gutter-sm, 16px);
    padding-right: var(--site-shell-gutter-sm, 16px);
  }
}

/* Figma sidebar column: flex column, align start, padding 0, gap 24px, width 300 (desktop) */
.view-article .article-page__sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  margin-bottom: 48px;
}

.view-article .article-page__sidebar-block,
.view-article .article-page__sidebar > .article-sidebar {
  width: 100%;
  min-width: 0;
  flex: none;
}

/* Collapse empty actions so gap 24px is only between real sections */
.view-article .article-sidebar__actions:empty {
  display: none !important;
}

/* Figma: inner stack (buttons + stats) uses tighter vertical rhythm */
.view-article .article-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  width: 100%;
}

/* Figma 68:1509 — gap between button stack and Views/Downloads row */
.view-article .article-sidebar.article-sidebar--ieom {
  gap: 24px;
}

/* Inline action buttons (PDF + Cite This) inside the article hero — Bootstrap btn btn-outline-secondary */
.view-article .article-hero-actions__icon {
  font-size: var(--font-size-sm);
  opacity: 0.95;
}

@media (max-width: 575.98px) {
  .view-article .article-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Prevent nested media/tabs from forcing document-wide horizontal scroll (esp. below lg) */
.view-article .article-page__main {
  min-width: 0;
  width: 100%;
  min-height: 280px;
}

.view-article .article-page-row {
  width: 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .view-article .article-page__sidebar {
    flex: 0 0 300px !important;
    width: 300px;
    max-width: 300px;
    margin-left: 2rem;
    align-self: stretch;
  }

  .view-article .article-page__main {
    flex: 1 1 0 !important;
    width: 0;
    min-width: calc(100% - 332px);
    max-width: none;
    min-height: 360px;
  }

  /* Full-width main column when no playlist sidebar */
  .view-article .article-page-row--no-sidebar .article-page__main {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none;
  }

  .view-article .article-page-row {
    /* No horizontal gutter — gap comes from .article-page__sidebar { margin-left } */
    --bs-gutter-x: 0;
    /* Stretch both columns to equal height so the sidebar fills the content area */
    align-items: stretch;
  }
}

/* Fallback: hide actions strip if it has no real controls (whitespace breaks :empty) */
.view-article .article-sidebar__actions:not(:has(a, button)) {
  display: none !important;
}

/* Hide sidebar only when it has neither action buttons nor IEOM stats tiles */
.view-article .article-sidebar:not(:has(.article-sidebar__actions a, .article-sidebar__actions button)):not(:has(.article-sidebar__stat-tile)) {
  display: none !important;
}

/* Authors first in sidebar: flush to top with description/media card */
.view-article .article-page__sidebar > .article-page__sidebar-block--authors:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   Article breadcrumb bar — Figma 500:988 (SessionConsumptionNoVideoPage)
   utility/Breadcrumb.cfc + detail.cfm article-page-header
   ============================================================ */

.view-article.article-page-header {
  width: 100%;
  background: var(--article-figma-breadcrumb-bg, rgba(51, 65, 85, 0.03));
  border-bottom: 1px solid var(--article-figma-border, var(--color-border));
  box-sizing: border-box;
}

.view-article .article-page-header__inner {
  max-width: var(--site-shell-max-width, 1320px);
  margin: 0 auto;
  padding: 12px var(--site-shell-gutter, 32px) 11px;
  box-sizing: border-box;
}

.view-article .article-view-breadcrumb {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-article-meta);
  line-height: 16.5px;
  letter-spacing: 0.0644531px;
}

.view-article .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;
}

.view-article .article-view-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.view-article .article-view-breadcrumb .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");
}

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

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

.view-article .article-view-breadcrumb__link:hover {
  color: var(--article-figma-blue-800, #1e40af) !important;
  text-decoration: underline !important;
}

.view-article .article-view-breadcrumb__current {
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  font-weight: 400;
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.view-article .article-view-breadcrumb .breadcrumb-item.active {
  color: var(--article-figma-meta-muted, var(--color-text-muted));
}

/* ============================================================
   Article breadcrumb — Mobile responsive
   ============================================================ */

@media (max-width: 575.98px) {
  .view-article .article-page-header__inner {
    padding: 12px var(--site-shell-gutter-sm, 16px) 11px;
  }

  /* Bootstrap adds padding-left to every non-first item for the floated ::before separator.
     Our separator is inline (not floated), so this padding creates a hanging indent
     when items wrap to a new line. Remove it so all wrapped lines are flush-left. */
  .view-article .article-view-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
  }

  .view-article .article-view-breadcrumb__link {
    max-width: 96px;
  }

  .view-article .article-view-breadcrumb__current {
    max-width: 160px;
  }
}

/* ============================================================
   Hero header (components/article_header_new.cfm) — Figma 523-129x
   ============================================================ */

.view-article .article-hero {
  padding-top: 0.25rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.view-article .article-hero-row--centered .article-hero {
  max-width: none;
}

/* Badge · session context row */
.view-article .article-hero__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

/* Figma: badge #DBEAFE, label #1E40AF, 12px/500, radius 8px, pad 4px 8px */
.view-article .article-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 1.5rem;
  padding: 4px 8px;
  font-size: var(--font-size-card-badge);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--article-figma-badge-text, #1e40af);
  background: var(--article-figma-badge-bg, #dbeafe);
  border-radius: 8px;
  line-height: 16px;
}

.view-article .article-hero__meta-dot {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 15px;
  color: var(--article-figma-dot, var(--color-border));
  user-select: none;
}

/* Figma meta: 11px/16 #6C757D — inline after dot, not full-width flex grow */
.view-article .article-hero__meta-session,
.view-article a.article-hero__meta-session {
  display: inline-block;
  max-width: min(100%, 520px);
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  letter-spacing: 0.0644531px;
  font-weight: 400;
  color: var(--article-figma-meta-gray, var(--color-text-secondary)) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.view-article a.article-hero__meta-session:hover {
  color: var(--article-figma-blue-800, #1e40af) !important;
  text-decoration: underline !important;
}

/* Legacy meta-line helpers (other templates) */
.view-article .article-hero__meta-line {
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  letter-spacing: 0.0644531px;
  color: var(--article-figma-meta-gray, var(--color-text-secondary));
  min-width: 0;
}

.view-article .article-hero__meta-primary {
  flex: 1 1 45%;
  min-width: 0;
  font-weight: 400;
  color: var(--article-figma-meta-gray, var(--color-text-secondary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-article .article-hero__meta-line > .article-hero__meta-dot {
  flex-shrink: 0;
}

.view-article .article-hero__meta-line > .article-hero__meta-session,
.view-article .article-hero__meta-line > a.article-hero__meta-session {
  flex: 1 1 45%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figma H1: 22px/30, 600, #212529 */
.view-article .article-hero__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.view-article .article-hero__title-row .article-hero__title {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* Title metric chips (cdp-chip--views / cdp-chip--downloads) — article_header_new.cfm */
.view-article .article-hero__title-row:not(:has(.article-hero__title-chips)) .article-hero__title {
  width: 100%;
}

.view-article .article-hero__title-chips {
  flex-shrink: 0;
  margin-top: 0;
  justify-content: flex-end;
  align-self: flex-start;
  padding-top: 6px;
  max-width: 42%;
}

.view-article .article-hero__title-chips.cdp-chip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* 12px icon floor (icon--size-xs); overrides global .cdp-chip i 13px without going blurry */
.view-article .article-hero__title-chips .cdp-chip .app-icon {
  font-size: var(--font-size-card-badge);
  width: 1em;
  min-width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.view-article .article-hero__title-chips .cdp-chip--views {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.view-article .article-hero__title-chips .cdp-chip--downloads {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.view-article .article-hero__media-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.view-article .article-hero__media-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-body);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 14px;
}

.view-article .article-hero__title {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: -0.557813px;
  color: var(--article-figma-title, var(--color-text)) !important;
  margin: 0 0 8px !important;
}

@media (max-width: 575.98px) {
  .view-article .article-hero__title-row {
    flex-direction: column;
    gap: 8px;
  }

  .view-article .article-hero__title-chips {
    align-self: stretch;
    justify-content: flex-start;
    max-width: 100%;
    padding-top: 0;
  }

  .view-article .article-hero__title {
    font-size: var(--font-size-lg) !important;
    line-height: 1.35 !important;
  }
}

/* Figma subtitle: 12px/18 #9CA3AF */
.view-article .article-hero__subtitle {
  font-size: var(--font-size-card-badge);
  line-height: 18px;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  margin: 0 0 16px !important;
}

/* ── Author chips (Figma 523:407) — white pill, 1px border, 32px avatar ── */
.view-article .article-hero__authors {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

.view-article .article-hero__author-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-bg-surface);
  border: 1px solid var(--article-figma-border, var(--color-border));
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.article-hero__author-chip {
  cursor: pointer;
}

a.article-hero__author-chip:hover {
  border-color: color-mix(in srgb, var(--article-figma-blue-800, #1e40af) 35%, var(--article-figma-border, var(--color-border)));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

a.article-hero__author-chip:hover .article-hero__author-name {
  color: var(--primary-color, #1e40af);
}

.view-article .article-hero__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);
  flex-shrink: 0;
}

.view-article .article-hero__author-avatar--img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: cover;
  flex-shrink: 0;
  background: #9faab3; /* color-exception: no clean semantic mapping (avatar placeholder shade) */
}

.view-article .article-hero__author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.view-article .article-hero__author-name {
  font-size: var(--font-size-card-badge);
  font-weight: 600;
  color: var(--article-figma-title, var(--color-text));
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-article .article-hero__author-org {
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  color: var(--article-figma-meta-gray, var(--color-text-secondary));
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

@media (max-width: 767px) {
  .view-article .article-hero__author-chip {
    min-height: 40px;
    padding: 6px 10px;
  }
  .view-article .article-hero__author-org {
    max-width: 160px;
  }
}

/* ============================================================
   Feature image lightbox (detail.cfm)
   ============================================================ */

.view-article .article-feature-image-trigger {
  cursor: pointer;
}

.view-article .article-feature-image-thumb {
  max-height: 150px;
}

.view-article .article-feature-image-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

.view-article .article-feature-image-modal__image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.view-article .article-feature-image-modal__close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: var(--color-danger);
  color: var(--color-on-primary);
  border: none;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  line-height: 1;
}

/* ============================================================
   Sidebar actions & stats (detail.cfm)
   ============================================================ */

.view-article .article-sidebar__actions {
  gap: 6px;
}

.view-article .article-sidebar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 0.75rem;
  box-sizing: border-box;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-sm);
  line-height: 20px;
  letter-spacing: -0.462891px;
  font-weight: 400;
  border-radius: 12px;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.view-article .article-sidebar__btn-icon {
  font-size: var(--font-size-sm);
  opacity: 0.95;
}

.view-article .article-sidebar__btn--primary,
.view-article .article-sidebar__btn--primary.download-pdf {
  background: var(--article-figma-blue-800, #1e40af) !important;
  border: 1px solid var(--article-figma-blue-800, #1e40af) !important;
  color: var(--color-on-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.view-article .article-sidebar__btn--primary:hover {
  filter: brightness(1.06);
  color: var(--color-on-primary) !important;
}

.view-article .article-sidebar__btn--outline {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--article-figma-border, var(--color-border)) !important;
  color: var(--article-figma-slate-700, var(--color-neutral-700)) !important;
}

/* Figma: Cite This — outline #1E40AF, label #1E40AF */
.view-article .article-sidebar__btn--outline.cite-this {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--article-figma-blue-800, #1e40af) !important;
  color: var(--article-figma-blue-800, #1e40af) !important;
}

.view-article .article-sidebar__btn--outline:hover {
  border-color: var(--article-figma-blue-800, #1e40af) !important;
  color: var(--article-figma-blue-800, #1e40af) !important;
  background: var(--color-bg-surface) !important;
}

.view-article .article-sidebar__btn--outline.cite-this:hover {
  filter: brightness(0.97);
}

/* Sidebar stat tiles: omitted when count is 0 (detail.cfm IEOM sidebar) */
.view-article .article-sidebar__stats:not(:has(.article-sidebar__stat-tile)) {
  display: none;
}

.view-article .article-sidebar__stats {
  gap: 6px;
  width: 100%;
}

.view-article .article-sidebar__stat-tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 107px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  min-height: 62px;
  padding: 10px 4px;
  box-sizing: border-box;
  background: var(--article-figma-band, var(--color-bg-page));
  border: 1px solid var(--article-figma-border, var(--color-border));
  border-radius: 8px;
}

.view-article .article-sidebar__stat-tile:only-child {
  max-width: none;
}

.view-article .article-sidebar__stat-num {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.3125px;
  color: var(--article-figma-title, var(--color-text));
}

.view-article .article-sidebar__stat-label {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 10px;
  line-height: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.117188px;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  margin-top: 0;
}

/* ── Mobile: IEOM sidebar responsive fixes (below 992px sidebar goes full-width) ── */
@media (max-width: 991.98px) {
  /* Buttons: stacked one below the other on mobile/iPad with gap */
  .view-article .article-sidebar--ieom .article-sidebar__actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .view-article .article-sidebar--ieom .article-sidebar__actions .article-sidebar__btn {
    width: 100%;
    min-width: 0;
  }

  /* Stat tiles: remove 107px cap (was sized for 220px desktop sidebar).
     flex:1 1 0 already splits them evenly — just let them grow. */
  .view-article .article-sidebar__stat-tile {
    max-width: none;
  }

  /* Cap the IEOM aside itself so it doesn't stretch uncomfortably on tablets */
  /* 14px side padding to match Authors / Related Research / article-pub spacing */
  .view-article .article-sidebar--ieom {
    max-width: 480px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Figma sidebar section labels: Authors / Related — 12px/18, 600, uppercase, 0.6px ls, #374151 */
.view-article .article-sidebar__block-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
}

.view-article .article-sidebar__block-heading--in-card {
  margin-bottom: 12px;
  padding-bottom: 0;
}

.view-article .article-sidebar__block-heading-icon {
  width: 13px;
  height: 13px;
  text-align: center;
  font-size: var(--font-size-card-meta);
  color: var(--article-figma-slate-700, var(--color-neutral-700));
  line-height: 1;
  flex-shrink: 0;
}

.view-article .article-sidebar__block-heading-icon--svg {
  display: block;
  overflow: visible;
}

.view-article .article-sidebar__block-heading-title,
.view-article .article-sidebar__section-title.article-sidebar__block-heading-title {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-badge) !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--article-figma-section-heading, var(--color-text-body)) !important;
  margin: 0 !important;
}

/* ============================================================
   Publication metadata grid (.article-pub)
   ============================================================ */

/* Outer container is the single flat grid — max 4 columns.
   article-pub__row uses display:contents so its fields become
   direct grid items, giving consistent vertical column alignment
   across all rows regardless of how many fields each row holds. */
.view-article .article-body.article-pub {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.25rem 0 !important;
  margin-top: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 1rem 1.5rem;
}

/* Flatten rows — children become direct grid items of .article-pub */
.view-article .article-pub__row {
  display: contents;
}

.view-article .article-pub__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Tablet: 2 columns */
@media (max-width: 991.98px) {
  .view-article .article-body.article-pub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 479.98px) {
  .view-article .article-body.article-pub {
    grid-template-columns: 1fr;
  }
}

.view-article .article-pub__label {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 10px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0.617188px;
  text-transform: uppercase;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  margin-bottom: 3px;
}

.view-article .article-pub__value {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-badge);
  line-height: 17px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--article-figma-gray-700, var(--color-text-body));
  word-break: break-word;
}

/* Figma empty metadata cells: em dash, muted */
.view-article .article-pub__value--empty {
  font-weight: 400;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
}

/* Figma DOI row: 12px/18 #334155 + external icon */
.view-article .article-pub__value--link .article-pub__doi-link,
.view-article .article-pub__value--link a.article-pub__doi-link {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-badge) !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  color: var(--article-figma-slate-700, var(--color-neutral-700)) !important;
  text-decoration: none !important;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.view-article .article-pub__doi-icon {
  font-size: var(--font-size-card-icon);
  line-height: 1;
  color: var(--article-figma-slate-700, var(--color-neutral-700));
  opacity: 0.9;
}

.view-article .article-pub__value--link a:hover {
  text-decoration: underline !important;
  color: var(--article-figma-blue-800, #1e40af) !important;
}

.view-article .article-pub__row--doi .article-pub__value:not(.article-pub__value--link) {
  line-height: 18px;
}

/* ============================================================
   Description tab body (Figma body copy)
   ============================================================ */

/* Figma body copy in Description: 13px / 22px, #374151
   Beats custom.css `.article-body .main-header` (15px / #1c1c1c) via higher specificity */
.view-article .article-body .main-header.article-description-prose {
  text-align: left !important;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta) !important;
  line-height: 22px !important;
  letter-spacing: -0.0761719px !important;
  color: var(--article-figma-gray-700, var(--color-text-body)) !important;
}

/* Section headings inside description (e.g. "Abstract"): 14px/700 dark, distinct from body */
.view-article .article-body .main-header.article-description-prose .header-article {
  text-align: left !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  color: var(--article-figma-title, var(--color-text)) !important;
  line-height: 20px !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.076px !important;
}

/* Figma: 14px vertical gap between body paragraphs */
.view-article .article-body .main-header.article-description-prose p + p {
  margin-top: 14px;
}

/* DAO injects <p class="sub-text-track"> on description HTML; custom.css indents 16px + 16px type — reset for proceedings */
.view-article .article-body .main-header.article-description-prose .sub-text-track {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta) !important;
  line-height: 22px !important;
  letter-spacing: -0.0761719px !important;
  color: var(--article-figma-gray-700, var(--color-text-body)) !important;
  font-weight: 400 !important;
}

/* Beat custom.css .sub-text-track (16px + 16px indent) anywhere under article prose */
.view-article .article-description-prose p {
  margin-left: 0 !important;
  font-size: var(--font-size-card-meta) !important;
  line-height: 22px !important;
  color: var(--article-figma-gray-700, var(--color-text-body)) !important;
}

/* ============================================================
   Attachment list — Figma: 58px row, pad 0 14px, gap 10, badge 32×32 r7
   ============================================================ */

.view-article .article-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.view-article a.article-attachments__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--article-figma-border, var(--color-border));
  border-radius: 8px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.view-article a.article-attachments__row:hover {
  border-color: color-mix(in srgb, var(--article-figma-blue-800, #1e40af) 35%, var(--article-figma-border, var(--color-border)));
}

.view-article .article-attachments__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.167px;
  text-transform: uppercase;
  border-radius: 7px;
  color: var(--color-on-primary);
  line-height: 14px;
}

.view-article .article-attachments__badge--pdf {
  background: var(--article-figma-pdf, #ef4444);
}

.view-article .article-attachments__badge--doc {
  background: #2563eb;
}

.view-article .article-attachments__badge--xls,
.view-article .article-attachments__badge--xlsx {
  background: var(--article-figma-xls, #16a34a);
}

.view-article .article-attachments__badge--ppt {
  background: var(--article-figma-ppt, #f97316);
}

.view-article .article-attachments__badge--zip {
  background: var(--color-text-secondary);
}

.view-article .article-attachments__badge--file {
  background: var(--article-figma-slate-700, var(--color-neutral-700));
}

.view-article .article-attachments__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.25;
}

.view-article .article-attachments__title {
  font-size: var(--font-size-card-meta);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.076px;
  color: var(--article-figma-title, var(--color-text));
}

.view-article .article-attachments__size {
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  letter-spacing: 0.064px;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
}

.view-article .article-attachments__dl-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-size: var(--font-size-sm);
  line-height: 14px;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  margin-left: auto;
}

/* ============================================================
   9. PUBLICATION INFO CARD  (.article-body)
   Card styling only when NOT inside media_block (Description tab content)
   ============================================================ */

/* Card styling — background, border, shadow (standalone blocks only; media_block overrides below) */
.view-article .article-body {
  padding: 0.85rem 1.25rem;
  margin-top: 0.4rem !important;
  margin-bottom: 0.75rem;
  background: var(--color-bg, var(--color-bg-surface));
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text-color) 4%, transparent);
}

/* article-body inside media_block (e.g. Description tab content) — no card styling; flush with tabs + metadata */
.view-article .media_block .article-body {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Restricted article / media access notice (article_access_notice.cfm) */
.view-article .article-access-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-page, #f8fafc);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.view-article .article-access-notice__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color, #1e40af) 10%, #fff);
  color: var(--primary-color, #1e40af);
}

.view-article .article-access-notice--compact .article-access-notice__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.view-article .article-access-notice__body {
  min-width: 0;
  flex: 1;
}

.view-article .article-access-notice__title {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-card-title, 15px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.04px;
  color: var(--color-text, #1e293b);
}

.view-article .article-access-notice__text {
  margin: 0 0 0.75rem;
  font-size: var(--font-size-card-meta, 13px);
  line-height: 1.5;
  color: var(--color-text-muted, #64748b);
}

.view-article .article-access-notice__text:last-child {
  margin-bottom: 0;
}

.view-article .article-access-notice__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.view-article .article-access-notice--compact {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 10px;
}

.view-article .article-access-notice--compact .article-access-notice__title {
  font-size: var(--font-size-card-title, 15px);
  margin-bottom: 0.35rem;
}

.view-article .article-media-access-restricted .article-access-notice--compact {
  margin-top: 0.75rem;
}

/* Access / gating headline — readable, not tab-label scale */
.view-article .article-body > .main-header > .header-article {
  font-size: var(--font-size-card-title) !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.0761719px !important;
  color: var(--color-text) !important;
}

/* Media block track line — Figma inline section 13/20 */
.view-article .media_block .main-header .header-article {
  font-size: var(--font-size-card-meta) !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.0761719px !important;
  color: var(--color-text-body) !important;
  margin: 0 0 0.5rem !important;
}

/* Description: first heading = track/context (sentence case); following = field labels (uppercase 12/18) */
.view-article .article-body .main-header.article-description-prose > .header-article:first-of-type {
  font-size: var(--font-size-card-meta) !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.0761719px !important;
  text-transform: none !important;
  color: var(--color-text-body) !important;
}

.view-article .article-body .main-header.article-description-prose > .header-article:not(:first-of-type) {
  font-size: var(--font-size-card-badge) !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--color-text-body) !important;
  margin-top: 1rem !important;
}

/* Media block — tabs + panes flush with column (Figma: no surrounding card) */
.view-article .media_block {
  display: block;
  padding: 0 !important;
  margin-bottom: 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  box-shadow: none;
}

.view-article .media_block .article-media-tabs-nav {
  margin-bottom: 0;
}

/* Tab panes — full-width main column; top padding matches Figma 22px gap between tabs and content */
.view-article .media_block #mediaBlock_nav-tabContent {
  padding: 22px 0 0.85rem;
}

.view-article .media_block #mediaBlock_nav-tabContent > .tab-pane {
  padding-left: 0;
  padding-right: 0;
}

/* Tab strip — Figma bottom border #E9ECEF, height ~41.5px */
.view-article .media_block #mediaBlock_nav-tab {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin: 0;
}

/* ============================================================
   STATS DIVIDER  (.stats-hr)
   Thin rule between Views and Downloads counts in the article header
   Replaces inline <hr style="width:70%;color:#212529;margin-top:2px;">
   ============================================================ */
.view-article .stats-hr {
  width: 70%;
  color: var(--color-text);
  margin-top: 2px;
  margin-bottom: 0;
  opacity: 0.25;
  margin-left: auto;
}

/* ============================================================
   ARTICLE STATS  (.article-stats)
   Flex-inline stats block (views / downloads) aligned to the
   top-right of the title/metadata header column
   ============================================================ */
.view-article .article-stats {
  flex-shrink: 0;
  text-align: right;
  min-width: 0;
}

.view-article .article-stats .right-header {
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .view-article .article-stats {
    text-align: left;
  }

  .view-article .article-stats .right-header {
    justify-content: flex-start;
  }
}

/* Remove extra gutter on the row wrapping the pub info card */
.view-article .bg-article .row {
  margin-bottom: 0 !important;
}

/* ============================================================
   10. PUBLICATION TEXT  (.common-text)
   ============================================================ */

.view-article .common-text {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta) !important;
  line-height: 20px !important;
  letter-spacing: -0.0761719px;
  color: var(--color-text-secondary) !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.view-article .common-text strong {
  font-family: var(--article-font, var(--font-family)) !important;
  font-weight: 600;
  color: var(--color-heading-legacy);
}

.view-article .common-text a,
.view-article .doi-text a {
  color: var(--primary-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-article-meta);
  line-height: 16px;
  word-break: break-all;
  text-decoration: none;
}

.view-article .common-text a:hover,
.view-article .doi-text a:hover {
  text-decoration: underline;
}

/* ============================================================
   11. ADMIN OVERRIDE BANNER
   ============================================================ */

.view-article .admin-override-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta);
  line-height: 20px;
  color: #856404;
}

/* ============================================================
   12. CITATIONS  (.citation-header, .citation-url)
   ============================================================ */

.view-article .citation-header {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.0761719px;
  color: var(--color-text);
  border-bottom: 1px solid var(--article-figma-border, var(--color-border));
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.view-article .citation-url {
  color: var(--primary-color);
  text-decoration: none;
}

.view-article .citation-url:hover {
  text-decoration: underline;
}

.view-article .show-more-citations {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta);
  line-height: 20px;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-on-primary);
  border-radius: 8px;
  padding: 0.3rem 1rem;
  margin-top: 0.5rem;
}

/* ============================================================
   13. AUTHOR PANEL SIDEBAR  (.browse-card-panel, .author-panel__section)
   ============================================================ */

/* Shared card shell — variables only (author panel + related articles base) */
.view-article .browse-card.browse-card-panel {
  font-family: var(--article-font, var(--font-family)) !important;
  border: 1px solid var(--article-figma-border, var(--color-border)) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--color-bg, var(--color-bg-surface)) !important;
  overflow: hidden;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 1rem;
}

/* Figma (68:1533): icon + AUTHORS above white card; card body is list only */
.view-article .author-panel .author-panel__card-body {
  padding: 1px 13px 13px !important;
}

.view-article .author-panel__heading-above-card.article-sidebar__block-heading {
  margin-bottom: 10px !important;
  padding-left: 13px;
}

.view-article .author-panel__section {
  width: 100%;
}

/* Keep heading + card on the same horizontal track (override legacy w-80 card width) */
.view-article .author-panel__section > .author-panel__heading-above-card,
.view-article .author-panel__section > .author-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Author panel list container */
.view-article .author-panel__list {
  display: flex;
  flex-direction: column;
}

/* Author rows — Figma AuthorCard: flex row, gap 10px, pt 10px */
.view-article .author-panel__item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  /* Bootstrap .row negative gutters + % cols fight flex — zero gutter, gap handles spacing */
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 10px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--article-figma-border-soft, var(--color-border-subtle)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Fixed-width avatar track (36px circle) — avoids col-sm-3 % width overlapping bio text */
.view-article .author-panel__item .author-panel__avatar-col {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.view-article .author-panel__item .author-panel__bio-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.view-article .author-panel__item:last-child {
  border-bottom: none !important;
}

/* Figma 68:677 — no row hover fill; card stays flat white */

/* Suppress the <br/> between author rows */
.view-article .browse-card-panel br {
  display: none;
}

/* Image column — circle flush left; no centering (prevents visual overlap with name block) */
.view-article .author-panel .imgDiv {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}

/* Avatar container */
.view-article .author-panel .author-img-span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  border-radius: 50% !important;
  overflow: hidden;
  margin: 0 !important;
  border: none;
}

/* Author avatar — Figma 36×36 */
.view-article .author-panel .author-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

/* Text column — padding-left: 0 since flex gap on parent handles spacing */
.view-article .author-panel .authorsDiv .col-sm-9 {
  font-family: var(--article-font, var(--font-family));
  word-wrap: break-word;
  padding-left: 0;
}

/* Affiliation line — Figma 11px/15 #6C757D (between name and country) */
.view-article .author-panel__affiliation {
  display: block;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-article-meta);
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0.0645px;
  color: var(--article-figma-meta-gray, var(--color-text-secondary));
  margin-top: 1px;
}

/* Author details wrapper */
.view-article .author-panel .author_details {
  font-family: var(--article-font, var(--font-family));
  margin-left: 0 !important;
}

/* Author name link */
.view-article .author-panel .author-link {
  font-family: var(--article-font, var(--font-family)) !important;
  color: var(--article-figma-title, var(--color-text)) !important;
  text-decoration: none;
  font-size: var(--font-size-card-meta);
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.076px;
  display: block;
}

.view-article .author-panel .author-link:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
}

/* Author text (no link) */
.view-article .author-panel .author-text {
  font-family: var(--article-font, var(--font-family)) !important;
  color: var(--article-figma-title, var(--color-text)) !important;
  font-size: var(--font-size-card-meta);
  font-weight: 600;
  display: block;
  line-height: 18px;
  letter-spacing: -0.076px;
}

/* Country — Figma 10px/14 #9CA3AF */
.view-article .author-panel .author-panel__country {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.117px;
  color: var(--article-figma-meta-muted, var(--color-text-muted));
  display: block;
  margin-top: 1px;
}

/* Presenter — inline pill tag above author name */
.view-article .author-panel .author-panel__presenter-line {
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e40af;
  margin: 0 0 4px;
  padding: 2px 8px 2px 6px;
  border-left: 2px solid #1e40af;
  border-radius: 0 4px 4px 0;
  background: #eff6ff;
}

/* ============================================================
   13b. AUTHOR PANEL — MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
  /* Outer wrappers: 14px side padding so white cards have a gap from page edges */
  .view-article .article-page__sidebar-block--authors,
  .view-article .article-page__sidebar-block--related {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Card + heading fill the padded wrapper cleanly */
  .view-article .author-panel__section > .author-panel__heading-above-card,
  .view-article .author-panel__section > .author-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override custom.css .new-width:auto that shrinks the card on mobile */
  .view-article .author-panel.new-width,
  .view-article .browse-card-panel.author-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Row layout — avatar left, bio right (same as desktop) */
  .view-article .author-panel__item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 0 !important;
    gap: 12px !important;
  }

  /* Avatar column: fixed 44px for touch target */
  .view-article .author-panel__item .author-panel__avatar-col {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .view-article .author-panel .author-img-span {
    width: 44px !important;
    height: 44px !important;
  }

  .view-article .author-panel .author-img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Bio column: fills remaining width, left-aligned */
  .view-article .author-panel__item .author-panel__bio-col {
    flex: 1 1 0 !important;
    width: auto !important;
    text-align: left !important;
  }

  /* Presenter label */
  .view-article .author-panel .author-panel__presenter-line {
    margin-bottom: 3px;
  }

  /* Name */
  .view-article .author-panel .author-link,
  .view-article .author-panel .author-text {
    font-size: var(--font-size-card-meta);
    line-height: 18px;
    text-align: left;
  }

  /* Affiliation + country: left-aligned */
  .view-article .author-panel__affiliation,
  .view-article .author-panel .author-panel__country,
  .view-article .author-panel .author_details {
    text-align: left;
  }

  /* Image col flush left */
  .view-article .author-panel .imgDiv {
    justify-content: flex-start;
  }
}

/* ============================================================
   14. SIDEBAR — Mobile responsive
   ============================================================ */

@media (max-width: 991.98px) {
  .view-article .article-page__sidebar {
    gap: 16px;
  }

  .view-article .author-panel .author-panel__card-body {
    padding: 1px 13px 6px !important;
  }
}

/* ============================================================
   15. LEGACY HEADER SPECIFICS
   ============================================================ */

.view-article .article-header {
  padding: 0 !important;
  margin-bottom: 0.25rem;
}

.view-article .article-header a.link.article-title {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  margin-left: 0 !important;
}

.view-article .author-header {
  padding: 0.25rem 0;
}

.view-article .subname-header {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-body);
  margin-bottom: 0.2rem;
  margin-left: 0;
}

.view-article .sub-header-1 {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-left: 0;
}

/* ============================================================
   16. MEDIA BLOCK TABS  (#mediaBlock_nav-tab)
   Tabs: Description | Poster | Attachments
   Note: the active button carries .header-article — all those
         title-level overrides are neutralised here.
   ============================================================ */

/* Figma: strip 1px #E9ECEF; tab 13px/20, 500; active 2px #334155 bottom */
.view-article #mediaBlock_nav-tab {
  border-bottom: 1px solid var(--article-figma-border, var(--color-border));
  gap: 0;
  margin-bottom: 0;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.view-article .article-media-tabs__inner {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.view-article .article-media-tabs__icon,
.view-article .article-media-tabs__icon.app-icon {
  font-size: var(--font-size-card-meta);
  width: 13px;
  line-height: 1;
  opacity: 0.95;
}

.view-article #mediaBlock_nav-tab .mediaBlock_nav {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-card-meta) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: -0.076px !important;
  color: var(--article-figma-gray-500, var(--color-text-secondary)) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 41.5px;
  padding: 10px 16px 9px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
  text-decoration: none !important;
}

/* Description tab reuses .header-article — reset title-scale rules from §3 */
.view-article #mediaBlock_nav-tab .mediaBlock_nav.header-article {
  font-size: var(--font-size-card-meta) !important;
  line-height: 20px !important;
  margin: 0 !important;
  letter-spacing: -0.076px !important;
  color: var(--article-figma-gray-500, var(--color-text-secondary)) !important;
}

.view-article #mediaBlock_nav-tab .mediaBlock_nav.header-article.active {
  font-weight: 500 !important;
  color: var(--article-figma-slate-700, var(--color-neutral-700)) !important;
}

/* Suppress the accent bar ::after that .header-article injects */
.view-article #mediaBlock_nav-tab .mediaBlock_nav::after {
  display: none !important;
}

/* Hover */
.view-article #mediaBlock_nav-tab .mediaBlock_nav:hover {
  color: var(--article-figma-slate-700, var(--color-neutral-700)) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Active tab */
.view-article #mediaBlock_nav-tab .mediaBlock_nav.active {
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  color: var(--article-figma-slate-700, var(--color-neutral-700)) !important;
  border-bottom: 2px solid var(--article-figma-slate-700, var(--color-neutral-700)) !important;
  background: transparent !important;
}

/* Tab content area — add a small top gap */
.view-article #mediaBlock_nav-tabContent {
  padding-top: 0.75rem;
}

/* Mobile: compact tab padding; strip scroll/nowrap handled globally above */
/* 14px side padding on media block + section divider to match all other mobile blocks */
@media (max-width: 991.98px) {
  .view-article .media_block {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .view-article .article-section-divider {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}

@media (max-width: 575.98px) {
  .view-article #mediaBlock_nav-tab .mediaBlock_nav {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 36px;
    padding: 8px 12px;
  }

  .view-article .media_block #mediaBlock_nav-tabContent,
  .view-article .media_block #mediaBlock_nav-tabContent > .tab-pane {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   16b. VIDEO EMBED (Figma ArticleViewWMVideo — VideoEmbed + caption bar)
   ============================================================ */

.view-article .article-video-embed {
  box-sizing: border-box;
  border: 1px solid var(--article-figma-border, var(--color-border));
  border-radius: 12px;
  background: var(--color-bg, var(--color-bg-surface));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.view-article .article-video-embed__stage {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #334155 60%, #1e3a5f 100%);
}

.view-article .article-video-embed__player-wrap {
  position: relative;
  z-index: 1;
}

/* Video.js 8.x uses the "VideoJS" icon font for control glyphs (play/pause, volume, etc.).
   Do not inherit Inter from .view-article base rules — that breaks icons so play/pause look identical. */
.view-article .article-video-embed__player-wrap .video-js,
.view-article .article-video-embed__player-wrap .video-js * {
  font-family: VideoJS, Helvetica, Arial, sans-serif !important;
}

.view-article .article-video-embed__player-wrap .video-js {
  width: 100%;
}

.view-article .article-video-embed__duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  padding: 2px 6px;
  font-family: var(--article-font, var(--font-family));
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.0367188em;
  color: var(--color-on-primary);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  pointer-events: none;
}

.view-article .article-video-embed__caption {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 50px;
  background: var(--color-bg-page);
  border-top: 1px solid var(--article-figma-border, var(--color-border));
}

.view-article .article-video-embed__caption-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(51, 65, 85, 0.08);
  border-radius: 5px;
  color: var(--color-neutral-700);
  font-size: 10px;
}

.view-article .article-video-embed__caption-text {
  flex: 1;
  min-width: 0;
}

.view-article .article-video-embed__caption-title {
  margin: 0;
  font-family: var(--article-font, var(--font-family));
  font-size: var(--font-size-article-meta);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.0644531px;
  color: var(--color-text-body);
}

.view-article .article-video-embed__caption-meta {
  margin: 0;
  font-family: var(--article-font, var(--font-family));
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.117188px;
  color: var(--color-text-muted);
}

.view-article .article-video-embed__ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000000;
}

.view-article .article-video-embed__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Restricted video states (description.cfm) */
.view-article .article-video-admin-override {
  background-color: #fff3cd;
  border-color: #ff9800;
}

.view-article .article-media-access-restricted {
  background-color: #fcf9ef;
  border-color: var(--color-border);
}

.view-article .article-video-preview-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background-color: var(--color-bg-page);
  overflow: hidden;
}

.view-article .article-video-preview-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-article .article-video-locked-placeholder {
  background: linear-gradient(160deg, #1c1c2e 0%, #2d2d44 100%);
}

.view-article .article-video-lock-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.view-article .article-video-lock-icon {
  color: var(--color-on-primary);
  font-size: 4rem;
  opacity: 0.8;
}

.view-article .article-video-lock-label-wrap {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 15px;
  border-radius: 4px;
}

.view-article .article-video-lock-label {
  color: var(--color-on-primary);
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-weight: 500;
}

.view-article .article-video-warning-icon {
  font-size: var(--font-size-2xl);
}

/* ============================================================
   17. ATTACHMENT LINKS  (.attachment-view-link)
   The HTML uses btn btn-sm btn-light; override to a unified text-link
   style so hover behaviour matches every other link on the page.
   ============================================================ */

.view-article .attachment-view-link {
  font-family: var(--article-font, var(--font-family)) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  color: var(--primary-color) !important;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  line-height: 1.5;
  vertical-align: baseline;
}

.view-article .attachment-view-link:hover,
.view-article .attachment-view-link:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

/* Description / tab-pane body links — single underline on hover only,
   no border-bottom so there is never a doubled rule */
.view-article .tab-pane a:not([class*="btn"]):not(.attachment-view-link):not(.article-attachments__row) {
  text-decoration: none;
}

.view-article .tab-pane a:not([class*="btn"]):not(.attachment-view-link):not(.article-attachments__row):hover {
  text-decoration: underline;
}

/* ============================================================
   18. CITE MODAL
   ============================================================ */

.view-article .modal-title {
  font-family: var(--article-font, var(--font-family)) !important;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-heading-legacy);
}

/* Section divider between major content blocks on the article detail page */
.view-article .article-section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

/* ============================================================
   Article detail + playlist sidebar — hero/body left, sidebar right
   Same horizontal box as .container (--site-shell-gutter). Sidebar
   spans full column height so position:sticky works while scrolling.
   ============================================================ */
@media (min-width: 992px) {
  .article-detail-with-sidebar {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .article-detail-with-sidebar__main {
    flex: 1 1 0;
    width: 0;
    min-width: calc(100% - 372px);
  }

  .article-detail-with-sidebar > .article-page__sidebar {
    flex: 0 0 348px;
    width: 348px;
    max-width: 348px;
    margin-left: 24px;
    align-self: stretch;
    margin-bottom: 0;
    /* Sidebar is outside .view-article so must set flex context explicitly */
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
  }

  /* Outer .article-detail-shell.container owns gutters — no double padding */
  .article-detail-shell .article-detail-with-sidebar__main > .view-article > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}

/* ── Mobile/tablet: make the wrapper a flex column so we can reorder children.
   Playlist sidebar is surfaced ABOVE the article content with order:-1 — mirrors
   the pattern used by media players (e.g. YouTube mobile) where the playlist
   appears before a long content block so it is immediately discoverable.
   Desktop (≥992px) layout is controlled by the min-width block above and is untouched. ── */
@media (max-width: 991.98px) {
  .article-detail-with-sidebar {
    display: flex;
    flex-direction: column;
  }
  .article-detail-with-sidebar__main {
    order: 2;
    width: 100%;
    min-width: 0;
  }
  .article-detail-with-sidebar > .article-page__sidebar {
    order: 1;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 1rem;
  }
  /* Outer .article-detail-shell.container owns gutters — no double padding (mobile) */
  .article-detail-shell .article-detail-with-sidebar__main > .view-article > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}

/* ============================================================
   19. SESSION PLAYLIST SIDEBAR (article detail)
   ============================================================ */
/* Sidebar fills the full height of its column (mirrors svc-body behaviour on session pages).
   Sticky so it stays in view while long main content scrolls. */
.article-page__sidebar .svc-sidebar {
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 16px - 96px);
  margin-bottom: 48px;
  box-sizing: border-box;
}
/* List fills all remaining space between counter and footer — scrollable, no fixed cap */
.article-page__sidebar .svc-sidebar__list { flex: 1 1 0; min-height: 0; overflow-y: auto; max-height: none; }
/* Non-active icon box: Figma bg-[#f1f3f5]; active already handled by --active modifier */
.article-page__sidebar .svc-sidebar__item-icon:not(.svc-sidebar__item-icon--active) { background: var(--color-bg-muted); }

@media (max-width: 991px) {
  .article-page__sidebar .svc-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 0; /* wrapper margin-bottom handles spacing */
  }
  /* Limit list height on mobile so it is compact and scrollable.
     flex:none overrides the global flex:1 1 0 which collapses the list to 0
     when the parent (.svc-sidebar) has no defined height on mobile. */
  .article-page__sidebar .svc-sidebar__list {
    flex: none;
    height: auto;
    max-height: 280px;
    overflow-y: auto;
  }
  .view-article .article-page__sidebar {
    margin-bottom: 32px;
  }
  /* Sidebar now sits ABOVE the article — use a bottom border instead of left/top */
  .article-detail-with-sidebar > .article-page__sidebar.border-start {
    border-left: none !important;
    border-top: none !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    padding-top: 0;
    padding-bottom: 1rem;
  }
}

.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;
}