/* Where am I?
 *
 * Tab through any page in this panel and you cannot tell. There were zero
 * :focus-visible rules across every stylesheet — so keyboard navigation works
 * and is invisible, which for anybody who does not use a mouse means the
 * interface is unusable rather than merely awkward.
 *
 * :focus-visible, not :focus — a mouse click should not leave a ring behind it.
 * The browser decides which is which, and it decides well.
 */

:focus-visible {
  outline: 2px solid var(--a-accent, #B07D18);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Inputs already carry a border, so the ring wants to sit outside it rather
   than doubling up on the edge. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--a-accent, #B07D18);
}

/* A filled button's own colour is close to the accent; a light ring reads
   against it where a dark one disappears. */
.btn-a-primary:focus-visible,
.btn-primary:focus-visible {
  outline-color: #fff;
  outline-offset: -4px;
}

/* Rows and cards that behave as links. Without this, tabbing through a table
   of clickable rows is completely silent. */
tr[onclick]:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--a-accent, #B07D18);
  outline-offset: -2px;
}

/*
 * Skip to content.
 *
 * Off-screen until focused. Somebody navigating by keyboard otherwise tabs
 * through the entire navigation on every page before reaching anything.
 */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -3rem;
  z-index: 10001;
  padding: .6rem 1.1rem;
  border-radius: 0 0 8px 8px;
  background: var(--a-accent, #B07D18);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: inset-block-start .15s;
}
.skip-link:focus { inset-block-start: 0 }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none }
}