/* Citations and references, as every page of the blog shows them: an article (post.css, the shell blog/post-shell.html)
   and a series' page (worker/blog.js, .srs). The markup is worker/refs.js's; mockups/cites.js shows a citation's reference
   as a card and opens the list from a citation. Colours follow an article's reading settings (--rd-*), light elsewhere. */

:is(.article, .srs) a.cite { text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.article, .srs) a.cite:hover { text-decoration: underline; }

/* Citations: a small number; hovering or focusing it shows the reference (cites.js). */
:is(.article, .srs) a.cite { display: inline-block; min-width: 1.25em; margin: 0 .08em; padding: 0 .3em; border-radius: 4px; background: var(--rd-chip, #EEF2FB);
  font: 600 .7em/1.6 var(--sans); color: var(--rd-link, var(--ece-deep)); text-align: center; text-decoration: none; vertical-align: .32em; }
:is(.article, .srs) a.cite:hover, :is(.article, .srs) a.cite:focus-visible { background: var(--rd-link, var(--ece-deep)); color: var(--rd-bg, #FFFFFF); }
.tip { position: absolute; z-index: 40; max-width: 22rem; padding: .7rem .85rem; border-radius: 10px; background: #0F1640; color: #E6EAF7;
  font: 400 .82rem/1.45 var(--sans); box-shadow: 0 14px 34px -14px rgba(3,6,25,.6); pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .15s, transform .15s; }
.tip.on { opacity: 1; transform: none; }
.tip b { color: #fff; font-weight: 600; }
.tip a { color: #AFC3FF; }

/* References: one card that opens to the list. Closed, it names how many sources and of what kind;
   open, each source reads title first, then who wrote it and where, with its site as a link. */
.refs-wrap h2 { font: 600 1.15rem/1.3 var(--sans); letter-spacing: 0; margin: 3.4rem 0 1rem; }
.refs-box { margin-top: 3.4rem; border: 1px solid var(--rule); border-radius: 16px; background: var(--rd-card, #FFFFFF); overflow: hidden; }
.refs-box > summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; transition: background .2s; }
.refs-box > summary::-webkit-details-marker { display: none; }
.refs-box > summary:hover { background: var(--rd-soft, #F4F6FB); }
.refs-box > summary:focus-visible { outline: 3px solid var(--ece-orange); outline-offset: -3px; }
.rb-head { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
:is(.article, .srs) .refs-box h2 { margin: 0; font: 600 1.1rem/1.3 var(--sans); }
.rb-sum { font: 400 .84rem/1.4 var(--sans); color: var(--ink-2); }
.rb-toggle { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .8rem; border-radius: 999px;
  background: var(--rd-chip, #EEF2FB); font: 600 .8rem/1 var(--sans); color: var(--rd-link, var(--ece-deep)); }
.rb-toggle i { width: .55rem; height: .55rem; background: currentColor; transition: transform .25s; clip-path: polygon(0 25%, 50% 75%, 100% 25%, 85% 10%, 50% 45%, 15% 10%); }
.refs-box[open] .rb-toggle i { transform: rotate(180deg); }
.rb-hide, .refs-box[open] .rb-show { display: none; }
.refs-box[open] .rb-hide { display: inline; }
.refs { list-style: none; margin: 0; padding: 0 1.3rem .4rem; border-top: 1px solid var(--rule); }
:is(.article, .srs) .refs li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .2rem 1rem; margin: 0; padding: 1rem 0; scroll-margin-top: calc(var(--sh-hs) + 1rem); }
.refs li + li { border-top: 1px solid var(--rule); }
.refs li:target { margin: 0 -1.3rem; padding: 1rem 1.3rem; background: var(--rd-warm, #FFF6EF); }
.refs .num { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 7px; background: var(--rd-chip, #EEF2FB); font: 600 .78rem/1 var(--sans); color: var(--rd-link, var(--ece-deep)); }
:is(.article, .srs) .r-main p { margin: 0; }
.r-title { font: 600 1rem/1.4 var(--serif); color: var(--ink); }
.r-by { margin-top: .2rem !important; font: 400 .84rem/1.45 var(--sans); color: var(--ink-2); }
.r-in { margin-top: .1rem !important; font: 400 .84rem/1.45 var(--sans); color: var(--ink-2); }
.r-in em { font-style: italic; }
.r-note { display: block; font-size: .78rem; color: var(--rd-muted, #8D94AE); }
.r-side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.r-k { padding: .22rem .55rem; border-radius: 999px; border: 1px solid var(--rule); font: 500 .7rem/1.2 var(--sans); color: var(--ink-2); white-space: nowrap; }
.r-link { display: inline-flex; align-items: center; gap: .3rem; font: 500 .78rem/1.2 var(--sans); color: var(--rd-link, var(--ece-deep)); text-decoration: none; white-space: nowrap; }
.r-link:hover { text-decoration: underline; }
.r-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .refs-box > summary { flex-wrap: wrap; } .rb-toggle { margin-left: 0; }
  :is(.article, .srs) .refs li { grid-template-columns: 2.2rem minmax(0, 1fr); } .r-side { grid-column: 2; flex-direction: row; align-items: center; }
}