.app-icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mouse/touch/programmatic focus must not resemble a selection.
   Keyboard navigation retains one visible focus treatment. */
:root:not([data-keyboard-focus]) :is(a,button,summary,[role="button"],input[type="checkbox"],input[type="radio"]):focus {
  outline:none!important; box-shadow:none!important;
}
:root[data-keyboard-focus] :is(a,button,summary,[tabindex]):focus-visible {
  outline:1px solid var(--accent); outline-offset:2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}