apps/desktop/src/renderer/styles/markdown-link.css

  /* =============================================================================
     PR-UI-RENDER-2 — Markdown link router visual states

     Three states the Markdown link override can render:
       - .maka-markdown-link-internal — valid maka:// link. Rendered as
         a <button> so AT announces "button" not "link"; the action is
         in-app navigation, not a hyperlink.
       - .maka-markdown-link-broken — isMakaUri(href) but parseMakaUri
         returned null (unsupported namespace, malformed section, etc.)
         OR no MakaUriContext provider installed. Plain <span>, NOT
         clickable, NOT announced as link/button.
       - .maka-markdown-link-external — anything else. Ordinary <a>
         with target=_blank, opens in OS default browser.
     The internal/external variants share a base treatment; the broken
     variant uses a dashed destructive underline so users can tell it
     isn't actionable.

     Imported via `@import ... layer(components)` (styles.css) like the prose
     layer it decorates: unlayered, `.maka-markdown-link-external`'s
     text-decoration would beat the layered `.maka-prose a
     { text-decoration: none }` and external prose links paint two underlines
     (#618 item 1). The renderer-style-layer-cascade contract locks this.
  ============================================================================= */
.maka-markdown-link {
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    border-radius: var(--radius-control);
  }
.maka-markdown-link-internal {
    /* Reset native <button> chrome so it visually flows with prose. */
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--link);
    text-decoration: underline solid color-mix(in oklch, var(--link) 50%, var(--background));
    cursor: pointer;
  }
.maka-markdown-link-internal:hover {
    text-decoration-color: var(--link);
  }
.maka-markdown-link-internal:focus-visible {
    outline: var(--focus-ring-width) solid oklch(from var(--focus-ring) l c h / 0.42);
    outline-offset: var(--focus-ring-offset);
  }
.maka-markdown-link-internal:active {
    background: var(--state-selected-bg);
  }
.maka-markdown-link-external {
    color: var(--link);
    text-decoration: underline solid color-mix(in oklch, var(--link) 50%, var(--background));
  }
.maka-markdown-link-external:hover {
    text-decoration-color: var(--link);
  }
.maka-markdown-link-broken {
    color: var(--destructive);
    text-decoration: underline dashed oklch(from var(--destructive) l c h / 0.55);
    cursor: not-allowed;
  }