/* ============================================================================
   Inline citations.

   A sources list at the foot of a page tells a reader that the page has
   sources. It does not tell them which source backs THIS number, and that is
   the only question a sceptical reader actually asks. Every figure on this
   site should be one gesture from the thing it came from.

   The marker is an info dot, not a numbered chip. A boxed numeral sitting in
   the middle of a sentence is read as content: the eye stops on it, the line
   breaks around it, and a paragraph with six figures in it becomes unreadable.
   The dot is small, tonal, and skippable. The source arrives in a tooltip
   (cite.js) instead of being reprinted as a list the reader has to scroll to
   and then map back by number.

   The <sup>N</sup> stays in the markup. It is what screen readers announce,
   what the link resolves to, and what verify-citations.py counts. It is only
   hidden visually, so nothing about the audit trail changes.

   Markup contract, unchanged:
     <span class="c">2.9 to 10.9 dGH<a class="cite" href="#s12"><sup>12</sup></a></span>
     ...
     <li id="s12">Shahinyan 2005 ... <a href="...">link</a></li>
   ========================================================================= */

@layer components {

  /* ---- the marker ------------------------------------------------------ */

  /* A dot, not a letter. At this size an "i" glyph lands at about 4 px and turns
     to mush, so the mark drops the letterform and keeps the affordance.

     Sized in REM, not EM, deliberately. In em the dot inherited the font size of
     whatever it sat in, so the same mark was 5 px in body copy and 14 px in an
     h1, which made it loudest exactly where the text was already loudest. In rem
     it is one size everywhere on the page. Only the vertical offset stays in em,
     so the dot still rides at the right height for the line it is on.

     0.375rem is 6 px, which is what the em version rendered at in the running
     prose (--t-body-lg, 21 px at the desktop breakpoint). Anchoring to that and
     not to the 16 px root matters: the root is smaller than any text on the page,
     so a root-proportional dot came out a quarter smaller than the mark that
     looked right. */
  .cite {
    position: relative;
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-inline-start: 0.2rem;
    vertical-align: 0.5em;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 72%, transparent);
    text-decoration: none;
    cursor: help;
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }
  /* The dot is about 5 px. A 5 px hit target is not usable, so this throws an
     invisible box around it and keeps the target near WCAG 2.5.8 size while the
     visible mark stays tiny. Also in rem, so the target does not shrink in the
     smallest type. */
  .cite::after {
    content: "";
    position: absolute;
    inset: -0.55rem -0.45rem;
  }
  /* Announced and counted, never drawn. */
  .cite sup {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cite:hover,
  .cite:focus-visible,
  .cite[aria-expanded="true"] {
    background: var(--accent);
    box-shadow: 0 0 0 0.14rem color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .cite:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

  /* Several in a row read as one cluster, not as a fence. */
  .cite + .cite { margin-inline-start: 0.14rem }

  /* ---- the tooltip ----------------------------------------------------- */

  .cite-tip {
    position: fixed;
    z-index: 60;
    max-width: min(34rem, calc(100vw - 2rem));
    padding: var(--sp-4);
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 10%);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
  }
  .cite-tip[data-open] { opacity: 1; transform: none; pointer-events: auto }
  .cite-tip a { color: var(--accent) }
  .cite-tip .access { display: block; margin-top: var(--sp-2); color: var(--ink-3) }
  .cite-card { display: block }
  .cite-card > b { color: var(--ink) }
  .cite-read { display: block; margin-top: var(--sp-2) }

  @media (prefers-reduced-motion: reduce) {
    .cite, .cite-tip { transition: none }
  }

  /* ---- the list, collapsed -------------------------------------------- */

  /* Kept in the DOM, and kept complete: it is the audit trail, the no-JS
     fallback and the target of every #sN link. cite.js folds it into a
     <details> so it costs one line instead of a screenful. */
  .cite-fold { margin-top: var(--sp-6) }
  .cite-fold > summary {
    cursor: pointer;
    font-size: var(--t-sm);
    color: var(--ink-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--rule);
    list-style: none;
  }
  .cite-fold > summary::-webkit-details-marker { display: none }
  .cite-fold > summary::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .cite-fold[open] > summary::before { content: "\2212" }
  .cite-fold > summary:hover { color: var(--ink) }

  .sources { list-style: none; padding: 0; counter-reset: src }

  /* The number sits in a gutter, not a grid column. It was a two-column grid,
     which made EVERY child of the <li> its own grid item: an entry written as
     "Author 2005, <i>Title</i>, <a>link</a>" broke into alternating columns and
     rows instead of reading as one sentence. Absolute positioning gives the
     same look and leaves the contents in normal inline flow. */
  .sources li {
    counter-increment: src;
    position: relative;
    padding: var(--sp-3) 0 var(--sp-3) calc(2.2rem + var(--sp-3));
    border-top: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    scroll-margin-top: var(--sp-8);
  }
  .sources li::before {
    content: counter(src);
    position: absolute;
    left: 0;
    top: var(--sp-3);
    width: 2.2rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .sources .access { color: var(--ink-3); font-size: var(--t-caption) }

  /* Arriving from a marker still highlights the entry, for anyone who opens
     the list rather than reading the tooltip. */
  .sources li:target {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
    outline: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
    outline-offset: 4px;
  }

  /* ---- tooltip-only mode -------------------------------------------- */

  /* Brand sites, per CLAUDE.md 1.5. The hub is a reference site and prints its
     sources; a brand site should not carry a bibliography. The list stays in the
     DOM so the tooltip has something to read, so a screen reader can still reach
     it and so view-source still shows the working, but nothing is drawn. */
  [data-cite="tooltip-only"] .sources,
  [data-cite="tooltip-only"] .srcs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---- unsourced ------------------------------------------------------- */

  /* Still marked, no longer shouting. The word "UNSOURCED" set after every such
     claim was louder than the claim. The underline carries the signal and the
     tooltip carries the explanation. */
  .unsourced {
    border-bottom: 1px dotted color-mix(in oklab, var(--ink-3) 80%, transparent);
    cursor: help;
  }
}