/**
 * Toolkit Link — the scoring-surface affordance in the page-nav breadcrumb.
 *
 * Rendered by renderToolkitLink() in common/js/page-nav.js, immediately right
 * of the active combined-event badge on the 107live/live2 detail pages. Spec:
 * DESIGN.md §5 "Toolkit Link".
 *
 * The keypad mark carries no color at all — only semantic tk-* classes,
 * assigned below from --t7- tokens. Presentation-attribute var() is unreliable
 * across engines, the dark-mode lift then lives in exactly one place, and
 * lint_tokens.py sees no hex literals (the report-list.css pattern).
 */

.toolkit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--t7-radius-md);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Flat at rest: the filled badge to its left owns the emphasis in this bar. */
.toolkit-link:hover,
.toolkit-link:focus-visible {
    background: var(--t7-hover);
}

.toolkit-link:focus-visible {
    outline: 2px solid var(--t7-result-blue);
    outline-offset: 2px;
}

/* --- Mark ---------------------------------------------------------------- */

/* The frame runs at text-secondary, not at a border token: border-strong is
   1.5:1 on the light card and 2:1 on the dark one, so the outline that
   identifies the control disappeared into the surface. text-secondary carries
   7.5:1 light / 5.8:1 dark and needs no per-theme override. */
.toolkit-mark {
    display: block;
    --tk-frame: var(--t7-text-secondary);
    --tk-signal: var(--t7-result-blue);
    --tk-key: var(--t7-text-muted);
}

/* Dark-mode lift. result-blue has no [data-theme="dark"] variant and sits near
   2.8:1 on the dark card, under the 3:1 non-text floor. Lifted once here with
   color-mix over the token, as report-list.css does for its accents. */
[data-theme="dark"] .toolkit-mark {
    --tk-signal: color-mix(in srgb, var(--t7-result-blue) 70%, white);
}

.tk-frame {
    stroke: var(--tk-frame);
    stroke-width: 1;
    transition: stroke 0.2s ease;
}

.tk-display {
    fill: var(--tk-signal);
}

.tk-key {
    fill: var(--tk-key);
    transition: fill 0.2s ease;
}

/* Hover resolves the whole glyph to the signal color: one state change, so the
   mark reads as a single control rather than three parts. */
.toolkit-link:hover .tk-frame,
.toolkit-link:focus-visible .tk-frame {
    stroke: var(--tk-signal);
}

.toolkit-link:hover .tk-key,
.toolkit-link:focus-visible .tk-key {
    fill: var(--tk-signal);
}

@media (prefers-reduced-motion: reduce) {
    .toolkit-link,
    .tk-frame,
    .tk-key {
        transition: none;
    }
}