/**
 * Test Finder widget (tfw- prefix) - see includes/Tyre_Test/test_finder.php.
 *
 * Standalone by design: the widget drops into ANY page (new-look tf- shells
 * and the old boxed layout alike), so nothing here depends on tyres-for.css.
 * Tokens are read with literal fallbacks throughout.
 */

.tfw__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.tfw__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tr-text, #17202a);
}

a.tfw__all, a.tfw__all:link, a.tfw__all:visited {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tr-cyan, #0db1e7);
    text-decoration: none;
    white-space: nowrap;
}
a.tfw__all:hover { text-decoration: underline; color: #0a9bcc; }

/* Small eyebrow-style subheads ("The latest Tyre Reviews tests", group names) */
.tfw__sub {
    margin: 20px 0 10px;
    padding: 0;
    border: 0;
    background: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tr-muted, #5d6a75);
}
.tfw > .tfw__sub:first-child { margin-top: 0; }

/* Boxed link list */
.tfw__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 768px) {
    .tfw__list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
.tfw__list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 6px;
    padding: 11px 14px;
    transition: border-color 0.15s;
}
.tfw__list li:hover { border-color: var(--tr-cyan, #0db1e7); }
.tfw__list a, .tfw__list a:link, .tfw__list a:visited {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tr-text, #17202a);
    text-decoration: none;
}
.tfw__list a:hover { color: var(--tr-cyan, #0db1e7); text-decoration: none; }

.tfw__when {
    flex: 0 0 auto;
    min-width: 64px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-muted, #5d6a75);
}

/* Category tabs - progressive enhancement over the always-rendered groups */
.tfw__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 2px;
}
.tfw__tab {
    appearance: none;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tfw__tab:hover { border-color: var(--tr-cyan, #0db1e7); color: var(--tr-cyan, #0db1e7); }
.tfw__tab.is-active {
    background: var(--tr-cyan, #0db1e7);
    border-color: var(--tr-cyan, #0db1e7);
    color: #fff;
}

/* All groups are in the DOM for crawlers; only the active one is shown.
   <noscript> (emitted by the widget) reveals everything and hides the tabs. */
.tfw__group { display: none; }
.tfw__group.is-active { display: block; }
.tfw__group-title { margin-top: 14px; }