/* /sources — the paper library. Loaded after styles.css and built only from its tokens and components: the FAQ's
   search field (.faq-tools), the stage filter's chips (.chips, dusk when pressed), the confidence list (.facts).
   Dusk is the stages tone; links stay tide. The list reads in full without JavaScript; sources.js unhides the tools. */

.src-intro { margin-top: 1rem; }
.src-intro p { max-width: var(--measure); }

/* ---------- Tools: search, then the stage chips ---------- */
.src-tools { display: grid; gap: 0.75rem; margin-top: 1rem; }
.src-tools[hidden] { display: none; }
.src-tools .faq-tools { max-width: 22rem; }
.src-chips { display: flex; margin-top: 0; }
.src-count { margin-top: 1rem; }

/* Phones: the thirteen chips take one row that scrolls sideways instead of six wrapped rows above the list. The row runs
   to the screen edges; its padding keeps the focus ring and the first chip clear of them. */
@media (max-width: 640px) {
  .src-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .src-chips::-webkit-scrollbar { display: none; }
  .src-chips button { flex: none; }
}

/* ---------- The list ---------- */
.paper-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0 2rem;
}
.paper-list li + li, .paper-cites li + li { margin-top: 0; }
.paper { border-top: 1px solid var(--hairline); padding: 1rem 0 1.25rem; min-width: 0; }
.paper-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.paper h3 { font-size: 1.05rem; font-weight: 500; }
.paper:target h3 { color: var(--dusk); }
.paper-kind { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dusk); }
.paper-note { margin-top: 0.5rem; font-size: 0.95rem; }

/* Where it is cited: a label over a run of stage links (or explainer card names), each but the last followed by a middle
   dot, so a wrapped line ends on a dot rather than starting with one. */
.paper-cites { margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.paper-cites div { display: grid; gap: 0.125rem; }
.paper-cites dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.paper-cites dd { margin: 0; }
.paper-cites ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: 0.9rem; }
.paper-cites li:not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: 0.5rem; color: var(--stone); }
.paper-cites .cards { color: var(--ink); }

.paper-out { margin-top: 0.5rem; font-size: 0.875rem; }
.paper-out a { display: inline-flex; align-items: center; gap: 0.3em; }
.paper-out .ext { width: 0.7em; height: 0.7em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Nothing matches; the way back ---------- */
#paper-empty { margin-top: 1rem; }
.src-reset {
  all: unset;
  cursor: pointer;
  color: var(--tide);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.src-reset:hover { text-decoration-thickness: 2px; }
.src-reset:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 2px; }
.src-foot { margin-top: 1.5rem; }

/* ---------- Touch: 44 px targets where a finger lands ---------- */
@media (pointer: coarse) {
  .src-tools input[type="search"] { min-height: 44px; }
  .paper-cites a, .paper-out a, .src-reset { display: inline-flex; align-items: center; min-height: 44px; }
  .paper-cites ul { align-items: center; }
}

/* ---------- Print: the list as filtered, without the tools ---------- */
@media print {
  .src-tools, #paper-empty { display: none !important; }
  .paper { break-inside: avoid; }
  .paper-out .ext { display: none; }
}

/* The paper's own title (PubMed / NICE, via Scripts/paper-metadata.json) and where it appeared. */
.paper-title { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--ink); }
.paper-title a { color: inherit; text-decoration: none; }
.paper-title a:hover, .paper-title a:focus-visible { color: var(--tide); text-decoration: underline; text-underline-offset: 3px; }
.paper-pub { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--stone); font-style: italic; }