/*
 * New AI Health shared source-reference component.
 *
 * Used by publication references, stakeholder research sources,
 * and future evidence-led surfaces.
 */

/* ============================================================
   SOURCE REFERENCES
   ============================================================ */

.source-references a {
  color: var(--text);

  text-decoration: underline;
  text-decoration-color: rgba(29, 40, 51, 0.22);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;

  transition:
    color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

.source-references a:hover,
.source-references a:focus-visible {
  color: var(--blue);
  text-decoration-color: currentColor;
}

.source-references li::marker {
  color: #80766e;
  font-weight: 600;
}

.source-reference-list {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;

  padding:
    1.2rem
    1.35rem
    1.2rem
    3.25rem;

  border: 1px solid rgba(29, 40, 51, 0.04);
  border-radius: 14px;

  background: #faf9f7;
  box-shadow: none;
}

/* ============================================================
   SOURCE REFERENCES — PROGRESSIVE DISCLOSURE
   ============================================================ */

.source-references-more {
  margin-top: 0.9rem;
}

.source-references-more > summary {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 0.45rem;

  padding:
    0.55rem
    0.85rem;

  border: 1px solid #ccd2d8;
  border-radius: 999px;

  background: var(--surface, #fffdfb);
  color: var(--blue);

  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;

  cursor: pointer;
  list-style: none;

  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.source-references-more > summary::-webkit-details-marker {
  display: none;
}

.source-references-more > summary::after {
  color: var(--text);
  font-size: 1rem;
  line-height: 1;

  content: "+";
}

.source-references-more[open] > summary::after {
  content: "\2212";
}

.source-references-more > summary:hover {
  border-color: var(--blue);
  color: var(--text);
}

.source-references-more > summary:focus-visible {
  border-color: var(--blue);
  color: var(--text);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.source-references-more__open {
  display: none;
}

.source-references-more[open]
  .source-references-more__closed {
  display: none;
}

.source-references-more[open]
  .source-references-more__open {
  display: inline;
}

.source-reference-list--continued {
  margin-top: 1rem;
}

/* ============================================================
   SOURCE REFERENCES — PRINT
   ============================================================ */

@media print {
  .source-references-more > summary {
    display: none !important;
  }

  .source-references-more
    > .source-reference-list {
    display: block !important;
  }
}

/* ============================================================
   SOURCE REFERENCES — MOBILE
   ============================================================ */

@media (max-width: 760px) {
  .source-reference-list {
    padding:
      1rem
      1rem
      1rem
      2.5rem;
  }

  .source-references li {
    min-width: 0;
  }

  .source-references a,
  .source-references li span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .source-references-more {
    width: 100%;
    margin-top: 0.75rem;
  }

  .source-references-more > summary {
    box-sizing: border-box;
    justify-content: space-between;

    width: 100%;
    min-height: 42px;

    padding:
      0.65rem
      0.9rem;
  }

  .source-reference-list--continued {
    margin-top: 0.75rem;
  }
}