/* Hover and focus states, in CSS.

 * The portal carried 76 inline event handlers:
 *
 *     onmouseover="this.style.borderColor='var(--accent)'"
 *     onmouseout="this.style.borderColor='var(--border-2)'"
 *
 * Content-Security-Policy blocks every one of them — script-src-attr, 23
 * errors on the dashboard alone — so none of these effects has ever worked in
 * production. They work when the CSP is off, which is presumably how they came
 * to be written.
 *
 * CSS does this natively, without an event, a handler, or a policy exception.
 * It also works on keyboard focus and on touch, which the mouse handlers never
 * did.
 *
 * Three classes cover all 76: what changes is the border, the background, or
 * the opacity.
 */

/* ── A bordered surface that highlights on hover ──────────────── */
.hv-border {
  transition: border-color .16s var(--ease, ease);
}
.hv-border:hover,
.hv-border:focus-within {
  border-color: var(--accent, #C98E1F);
}

/* Where the highlight should be the accent even when the element sets its own
   border colour inline — a card tinted by category, for instance. */
.hv-border-accent:hover,
.hv-border-accent:focus-within {
  border-color: var(--accent, #C98E1F) !important;
}

/* ── A row or button that fills on hover ──────────────────────── */
.hv-fill {
  transition: background-color .16s var(--ease, ease);
}
.hv-fill:hover,
.hv-fill:focus-visible {
  background: var(--bg-2, rgba(0, 0, 0, .04));
}

/* ── Something that brightens on hover ────────────────────────── */
.hv-lift {
  transition: opacity .16s var(--ease, ease), filter .16s var(--ease, ease);
}
.hv-lift:hover,
.hv-lift:focus-visible {
  opacity: 1;
  filter: brightness(1.06);
}

/* An element that starts dimmed and comes up on hover — the inverse, and the
   commonest use of the opacity handlers. */
.hv-dim {
  opacity: .7;
  transition: opacity .16s var(--ease, ease);
}
.hv-dim:hover,
.hv-dim:focus-visible {
  opacity: 1;
}

/* ── The underline used by the nav ────────────────────────────── */
.hv-underline {
  transition: border-bottom-color .16s var(--ease, ease);
  border-bottom: 2px solid transparent;
}
.hv-underline:hover,
.hv-underline:focus-visible {
  border-bottom-color: var(--accent, #C98E1F);
}

/* Somebody navigating by keyboard gets every one of these, which the mouse
   handlers never offered. */
@media (prefers-reduced-motion: reduce) {
  .hv-border, .hv-fill, .hv-lift, .hv-dim, .hv-underline { transition: none }
}