/*
 * YouTube Keyword Tool , brand-specific styles.
 *
 * Composes on top of:
 *   - code/assets/css/tools.css            (project-wide primitives)
 *   - code/assets/css/keyword-tool.css     (Keyword-Tools family CSS)
 */

:root {
    --kt-brand: #ff0000;
    --kt-brand-fade: #cc0000;
    --kt-brand-tint: #ffe5e5;
}

.tool-form-card .primary-btn:hover {
    background: var(--kt-brand-fade);
}

.kt-trend polyline {
    stroke: var(--kt-brand);
}

.kt-results-table th[data-sort].is-sorted-asc::after,
.kt-results-table th[data-sort].is-sorted-desc::after {
    color: var(--kt-brand);
    opacity: 0.7;
}

.kt-modifier-badge {
    background: var(--kt-brand-tint);
    color: var(--kt-brand-fade);
}

.kt-progress-fill {
    background: linear-gradient(90deg, var(--kt-brand) 0%, #ff5252 100%);
}

.history-item {
    cursor: pointer;
}
.history-item:hover {
    background: var(--kt-brand-tint);
}

.kt-example-chip:hover {
    border-color: var(--kt-brand);
    color: var(--kt-brand);
}

.results-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.kt-results-empty {
    padding: 24px;
    text-align: center;
    color: var(--ink-500, #64748b);
    font-size: 0.92em;
}

/* Mode-toggle: equal-width buttons so the sliding pill snaps cleanly
   when label widths differ. See [[mode-toggle-asymmetric-labels]]. */
.kt-mode-toggle .mode-btn {
    min-width: 135px;
    text-align: center;
}

/* YouTube play-triangle hero logo. Red rounded-rect with a white
   play triangle inside. Sized to 1em so it scales with the h1's
   font-size and aligns vertically with `vertical-align: -0.12em`. */
.ykt-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1em;
    margin-right: 0.45em;
    vertical-align: -0.18em;
    background: #ff0000;
    border-radius: 0.22em;
    box-sizing: content-box;
    box-shadow: 0 1px 3px rgba(255, 0, 0, 0.25);
}
.ykt-hero-logo svg {
    width: 50%;
    height: 50%;
    display: block;
}