/* hover and press feedback (hover lane). Loads last. Colour/opacity effects apply everywhere;
   movement is limited to fine pointers. It plays even when a device asks for less motion (Connor 10/25).
   Only transform, opacity, colour, background-color, border-color and box-shadow ever change, so nothing shifts layout. */
:root { --hv-ease: cubic-bezier(.2, .8, .2, 1); --hv-t: 180ms; }

/* ---------- colour easing (all devices) ---------- */
a, button.link, details.tbl summary, .sf-src { transition: color var(--hv-t) var(--hv-ease); }
nav.views a, button.theme { transition: color var(--hv-t) var(--hv-ease); }
.chip, button.btn { transition: color var(--hv-t) var(--hv-ease), background-color var(--hv-t) var(--hv-ease), border-color var(--hv-t) var(--hv-ease), opacity var(--hv-t) var(--hv-ease), transform 120ms var(--hv-ease); }
button.theme { transition: color var(--hv-t) var(--hv-ease), transform 120ms var(--hv-ease); }
th.sort { transition: color var(--hv-t) var(--hv-ease); }
th.sort:hover { color: var(--ink); }
#tray .chip, #compare .chip, #heartbeat .chip, #deals .chip, #firms .chip { transition: color var(--hv-t) var(--hv-ease), background-color var(--hv-t) var(--hv-ease), border-color var(--hv-t) var(--hv-ease), transform 120ms var(--hv-ease); }

/* chips: a soft tint on hover (the :is() list lifts specificity above the per-page chip rules) */
:is(#briefing, #firms, #compare, #newfirms, #heartbeat, #deals, #clients, #robos, #tray) .chip:not(.on):hover { background-color: color-mix(in srgb, var(--ink) 6%, var(--chip)); border-color: var(--rule); }
:is(#briefing, #firms, #compare, #newfirms, #heartbeat, #deals, #clients, #robos, #tray) .chip:not(.on):hover b { color: var(--ink2); }   /* the count stays above 4.5:1 on the darker hover fill */
:is(#compare, #tray, #deals) .chip:not(.on):hover { border-color: var(--ink3); }
#firms .chip.cmp:not(.on):hover { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }

/* table rows: soft background ease-in */
tbody tr td { transition: background-color var(--hv-t) var(--hv-ease); }
#deals tbody tr:hover td, #compare tbody tr:hover td, #briefing tbody tr:hover td, #clients tbody tr:hover td, #robos tbody tr:hover td, #newfirms tbody tr:hover td, #method tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#firms tbody tr.click:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#compare tbody tr:hover td.rl { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* keyboard focus rings, one look everywhere */
:is(a, button, summary, th.sort, tr.click, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.chip:focus-visible { border-radius: 980px; }
#compare .chip:focus-visible, #tray .chip:focus-visible, #firms .chip.cmp:focus-visible { border-radius: 6px; }
button.theme:focus-visible { outline-offset: 0; }
#map-find:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
nav.views a:focus-visible { outline-offset: 4px; border-radius: 3px; }

/* ---------- nav underline ---------- */
nav.views a { position: relative; }
nav.views a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; opacity: .55; }
nav.views a.on::after { transform: scaleX(1); opacity: 1; }

/* ---------- "go" arrow: invisible at rest, so nothing looks different until hover ---------- */
#briefing .linkblock .go::after { content: "\2192"; display: inline-block; margin-left: 6px; opacity: 0; }
#briefing .linkblock:hover .go { text-decoration: none; }
#briefing .linkblock:hover .go::after, #briefing .linkblock:focus-visible .go::after { opacity: 1; }
#briefing .linkblock .go::after { transition: opacity var(--hv-t) var(--hv-ease), transform var(--hv-t) var(--hv-ease); }

/* ---------- cards: a surface plate behind the content, faded in (so padding and layout never change). The 2026 quarter cards are not clickable, so they get none; their links and bars keep their own hover ---------- */
#briefing .linkblock, #firms .stat[data-src] { position: relative; isolation: isolate; transition: transform var(--hv-t) var(--hv-ease); }
#briefing .linkblock::before, #firms .stat[data-src]::before {
  content: ""; position: absolute; inset: -12px -14px; z-index: -1; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity var(--hv-t) var(--hv-ease); }
#briefing .linkblock:hover::before, #briefing .linkblock:focus-visible::before,
#firms .stat[data-src]:hover::before { opacity: 1; }
#firms .stat[data-src]:hover .l { text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* ---------- tooltip: fade, and (when motion is welcome) a 4px rise ---------- */
#tip { transition: opacity 160ms var(--hv-ease), transform 160ms var(--hv-ease); }

#tip.on:has(.tip-open) { pointer-events: auto; }

/* ---------- movement, fine pointers only ---------- */
@media all {
  #tip { transform: translateY(4px); }
  #tip.on { transform: none; }
  .chip:active, button.btn:not(:disabled):active, button.theme:active { transform: scale(.96); }
  nav.views a::after { transition: transform 220ms var(--hv-ease), opacity var(--hv-t) var(--hv-ease); }
}
@media (hover: hover) and (pointer: fine) {
  nav.views a:hover::after { transform: scaleX(1); opacity: 1; }
  #briefing .linkblock:hover, #firms .stat[data-src]:hover { transform: translateY(-2px); }
  #briefing .linkblock .go::after { transform: translateX(-4px); }
  #briefing .linkblock:hover .go::after { transform: translateX(3px); }
}

/* ---------- keyboard: the item the arrow keys are on (SVG shapes take a stroke, html takes an outline) ---------- */
.kb-on { outline: 2px solid var(--accent); outline-offset: 2px; }
svg .kb-on { outline: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-opacity: 1; opacity: 1; }
svg g.kb-on > * { stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
[data-kb]:focus-visible { border-radius: 6px; }