/* Crophalo's "i" source card: one white card under or over the button, 320 px wide, with the NASA tag first for a NASA figure. Only tokens of css/app.css are used here. */
.srcp { position: fixed; z-index: 3000; box-sizing: border-box; max-width: calc(100vw - 24px); padding: var(--space-8) var(--space-16) var(--space-16); border-radius: var(--r1); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; font-family: var(--font); font-size: var(--fs-row); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; text-align: left; zoom: var(--tz); outline: none; animation: fade .16s var(--ease) both; }
.srcp[hidden] { display: none; }
.srcp:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--sel); }
.srcp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.srcp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.srcp-x { display: grid; place-items: center; width: var(--touch); height: var(--touch); margin-right: -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; }
.srcp-x:focus-visible { outline: 3px solid var(--sel); outline-offset: -3px; }
@media (hover: hover) { .srcp-x:hover { background: var(--fill2); } }
.srcp-fig { display: grid; gap: 2px; margin: var(--space-4) 0 var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--r3); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.srcp-src { padding-top: var(--space-8); }
.srcp-src + .srcp-src { margin-top: var(--space-8); box-shadow: 0 -.5px 0 var(--sep); }
.srcp-src h3 { font-size: var(--fs-headline); line-height: 1.3; }
.srcp-src > p { margin-top: 2px; }
.srcp .link { display: inline-flex; align-items: center; min-height: var(--touch); }
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) { .srcp { animation: none; } }
@media print { .srcp { display: none !important; } }