/* Search Volume Checker - tool-specific overrides on top of the shared
 * tool primitives in code/assets/css/tools.css.
 *
 * Keeps:
 *   1. The form-controls row (textarea + 3 selects + submit) layout.
 *   2. Per-column widths on the results table.
 *   3. The competition .metric-badge family + sparkline rendering.
 *   4. The free-tier quota chips.
 */

/* ========================================================================
   Form layout - textarea then a row of selects + submit
   ======================================================================== */
.form-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 160px;
}

.control-group .control-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-500);
}

.form-controls .type-select {
    /* Overriding the shared min-width so currency (longest labels) doesn't
       blow the row out. The select still grows to fill its grid cell on
       wide viewports. */
    min-width: 0;
    width: 100%;
}

.form-controls .primary-btn {
    /* No `align-self: stretch` here - that used to grow the button to
       match the height of the `.control-group` columns (label +
       select), which made the SVC submit feel oversized compared to
       BLC. Default flex-end alignment from `.form-controls` lands the
       button on the same baseline as the selects. */
    flex: 0 0 auto;
}

.kw-feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    min-height: 22px;
    font-size: 13px;
    color: var(--ink-500);
}

.kw-count {
    font-feature-settings: var(--tnum);
    font-weight: 600;
    color: var(--ink-700);
}

.kw-feedback .feedback-msg.is-warning {
    color: #b45309;
}

@media (max-width: 720px) {
    .form-controls {
        gap: 10px;
    }
    .control-group {
        flex-basis: 100%;
    }
    .form-controls .primary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Free-tier quota chips
   ======================================================================== */
.quota-region {
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
}

.quota-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.quota-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-500);
}

.quota-upgrade {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-red);
}

.quota-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.quota-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
}

.quota-chip-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-500);
}

.quota-chip-text {
    font-feature-settings: var(--tnum);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.quota-chip-bar {
    display: block;
    height: 4px;
    background: var(--ink-200);
    border-radius: 999px;
    overflow: hidden;
}
.quota-chip-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
    transition: width 0.4s ease;
}

.quota-chip.is-warning .quota-chip-fill { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); }
.quota-chip.is-danger  .quota-chip-fill { background: linear-gradient(90deg, var(--bad-fg) 0%, #ef4444 100%); }
.quota-chip.is-warning .quota-chip-text { color: #b45309; }
.quota-chip.is-danger  .quota-chip-text { color: var(--bad-fg); }

/* ========================================================================
   Results table - lean into the data.

   Only 5 columns and most keywords are short, so we have plenty of room
   for the numbers to feel like the headlines they actually are. Volume
   in particular is what users came for; bumping it to 22px makes the
   row read almost like a stat card. The trend column gets a much wider
   chart so it conveys shape, not just an icon-sized hint.
   ======================================================================== */
.results-table th[data-col="keyword"] {
    width: 30%;
    min-width: 200px;
    text-align: left;
}
.results-table th[data-col="volume"] {
    width: 16%;
    min-width: 120px;
}
.results-table th[data-col="cpc"] {
    width: 12%;
    min-width: 90px;
}
.results-table th[data-col="competition"] {
    width: 16%;
    min-width: 130px;
}
.results-table th[data-col="trend"] {
    width: 26%;
    min-width: 170px;
}

.results-table tbody td {
    padding-top: 18px;
    padding-bottom: 18px;
}

.results-table .td-keyword {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.1px;
}

.results-table .td-volume {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.1px;
    font-feature-settings: var(--tnum);
}

.results-table .td-cpc {
    color: var(--ink-700);
    font-weight: 500;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}

.results-table .td-competition .metric-badge {
    font-size: 13px;
    padding: 5px 16px;
    min-width: 80px;
}

.results-table .td-trend {
    line-height: 0;  /* tighten the row height so the inline SVG sits centered */
}

/* ========================================================================
   Competition badges
   ======================================================================== */
.metric-badge {
    display: inline-block;
    min-width: 64px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-feature-settings: var(--tnum);
    letter-spacing: 0.1px;
}
.metric-badge--low    { background: var(--good-bg); color: var(--good-fg); }
.metric-badge--medium { background: var(--mid-bg);  color: var(--mid-fg); }
.metric-badge--high   { background: var(--bad-bg);  color: var(--bad-fg); }
.metric-badge--muted  { background: var(--ink-100); color: var(--ink-400); }

/* ========================================================================
   Sparkline + per-row trend tooltip

   The sparkline is a 60x16 SVG of red bars, one per month. Each bar's
   height is proportional to its value. The full tooltip (one row per
   month) lives in a single floating .trend-tooltip element appended to
   <body> by tool.js; we don't render 12-row tooltips inline because
   that would be ~120 extra DOM nodes per result row.
   ======================================================================== */
.sparkline {
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.trend-tooltip {
    position: fixed;
    z-index: 1100;
    background: var(--ink);
    color: #fff;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    min-width: 160px;
    max-width: 240px;
    /* Animation: fade in fast so a quick mouse-over feels responsive. */
    animation: trend-tip-in 0.12s ease-out;
}

@keyframes trend-tip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.trend-tip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 2px 0;
    font-feature-settings: var(--tnum);
}

.trend-tip-month {
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.trend-tip-value {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}