app.css

.cross-references__trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 28px; height: 28px; max-height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; color: var(--muted-foreground); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.cross-references__trigger:hover { color: var(--foreground); background: var(--accent); }
.cross-references__trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cross-references__trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cross-references__trigger[aria-busy="true"] { cursor: progress; }
.cross-references__count { min-width: 15px; padding: 1px 4px; border-radius: 999px; color: var(--primary-foreground); background: var(--primary); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.35; text-align: center; }
.cross-references__popover { position: fixed; z-index: 60; display: grid; gap: 8px; width: min(360px, calc(100vw - 16px)); max-height: min(360px, 60vh); overflow-y: auto; padding: 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 10px 30px color-mix(in srgb, var(--foreground) 18%, transparent); outline: none; }
.cross-references__popover > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cross-references__popover > header strong { font-size: 12px; }
.cross-references__popover > header span { min-width: 1.5rem; color: var(--muted-foreground); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.cross-references__close { min-height: 26px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--foreground); background: var(--background); font: inherit; font-size: 10px; cursor: pointer; }
.cross-references__close:hover { background: var(--accent); color: var(--accent-foreground); }
.cross-references__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cross-references__popover > button:not(.cross-references__close) { min-height: 28px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--foreground); background: var(--background); font: inherit; font-size: 10px; cursor: pointer; }
.cross-references__popover > button:not(.cross-references__close):hover { background: var(--accent); color: var(--accent-foreground); }
.cross-references__popover > button:not(.cross-references__close):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cross-references__popover > button:disabled { cursor: default; opacity: .58; }
.cross-references__popover ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cross-references__popover li { min-width: 0; border-radius: 6px; background: color-mix(in srgb, var(--muted) 38%, transparent); }
.cross-references__source-link { display: grid; gap: 2px; min-width: 0; padding: 8px; color: var(--foreground); text-decoration: none; }
.cross-references__source-link:hover { background: var(--accent); color: var(--accent-foreground); }
.cross-references__source-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.cross-references__source-link strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cross-references__source-link small { overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cross-references__message, .cross-references__stale, .cross-references__error { margin: 0; color: var(--muted-foreground); font-size: 10px; overflow-wrap: anywhere; }
.cross-references__error { color: var(--destructive); }
.cross-references__stale { color: var(--primary); }