/* Keyboard focus uses underlines, never a surrounding box.
   Only controls with a replacement cue below suppress the native outline. */
a:focus,
[data-tooltip-trigger]:focus,
.merge-controls :is(input,button):focus,
.code-artifact-scroll:focus,
.skills-study-title:focus {outline:none}

a:focus-visible {text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
.skills-study-title:focus-visible .skills-study-highlight,
.index-row[href]:focus-visible .row-title,
.article-pagination>a:focus-visible .article-nav-title {text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}

[data-tooltip-trigger]:focus-visible>.tool-icon::after {
  content:"";position:absolute;inset-inline:0;inset-block-end:-6px;
  border-block-end:2px solid var(--ink);pointer-events:none;
}
.article-home:focus-visible::after {
  content:"";position:absolute;inset-inline:4px;inset-block-end:0;
  border-block-end:2px solid var(--ink);pointer-events:none;
}

.merge-toggle input:focus-visible~.baseline-text,.merge-preset input:focus-visible+.baseline-text {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.merge-controls button:focus-visible {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.merge-controls label:has(>input[type=range]) {position:relative}
.merge-controls label:has(>input[type=range]:focus-visible)::after {
  content:"";position:absolute;inset-inline:16px;inset-block-end:4px;z-index:3;
  border-block-end:2px solid var(--ink);pointer-events:none;
}
.code-artifact-window:has(>.code-artifact-scroll:focus-visible)::after {
  content:"";position:absolute;inset-inline:16px calc(16px + var(--code-scrollbar-y,0px));inset-block-end:4px;
  z-index:2;border-block-end:2px solid var(--ink);pointer-events:none;
}