/* /tools/ hub: jump links between the groups and the recorded output of each
   tool under its card (page-tools.php, inc/data/tools-hub-previews.json).
   Theme tokens only, so light and dark follow. */

.tools-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 2rem;
}
.tools-jump a {
    padding: .375rem .875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: border-color var(--duration-ui, .2s) ease, color var(--duration-ui, .2s) ease;
}
.tools-jump a:hover,
.tools-jump a:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-text-primary, inherit);
}

.tools-preview {
    margin: .75rem 0 0;
    padding: .625rem .75rem;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font: .75rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: start;
}
.tools-preview--pre {
    /* five lines of the real output, faded out below that */
    max-height: 7.5em;
    overflow: hidden;
    white-space: pre;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}
.tools-preview--cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem .75rem;
    list-style: none;
    font-family: inherit;
    font-size: .75rem;
}
.tools-preview--cards li { display: flex; flex-direction: column; min-width: 0; }
.tools-preview--cards b { font-size: 1rem; font-weight: 600; color: var(--color-text-primary, inherit); }
.tools-preview--cards span { overflow-wrap: anywhere; }

/* The text column of a card may shrink below its content, otherwise a long
   preview line pushes the card wider than the phone. */
.page-tools-hub .card-glass > div { min-width: 0; }
.page-tools-hub .tools-preview { box-sizing: border-box; }