/* CPC 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 6 columns and most keywords are short, so we have plenty of room
   for the numbers to feel like the headlines they actually are. CPC is
   the headline metric here (this is the CPC Checker), so it sits first
   after the keyword and gets the wider, more prominent treatment. The
   trend column gets a much wider chart so it conveys shape, not just an
   icon-sized hint.
   ======================================================================== */
/* Widths sum to 100% across all SIX columns. The table is
   `table-layout: fixed`, so a column with NO width here collapses to ~0 and
   the column looks missing (see results-table-fixed-layout-th-widths). Any
   future column MUST be added here AND the percentages rebalanced. */
.results-table th[data-col="keyword"] {
    width: 28%;
    min-width: 180px;
    text-align: left;
}
.results-table th[data-col="cpc"] {
    width: 14%;
    min-width: 110px;
}
.results-table th[data-col="volume"] {
    width: 11%;
    min-width: 88px;
}
.results-table th[data-col="competition"] {
    width: 15%;
    min-width: 120px;
}
.results-table th[data-col="trend_pct"] {
    width: 11%;
    min-width: 90px;
}
.results-table th[data-col="trend"] {
    width: 21%;
    min-width: 150px;
}

.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;
}

/* CPC is the headline metric, so it gets the full-ink, stat-card weight. */
.results-table .td-cpc {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.1px;
    font-feature-settings: var(--tnum);
}

/* Volume is the secondary metric here, so it reads one notch quieter. */
.results-table .td-volume {
    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;
}

/* The metric filter bar, comp chips, .save-fav-btn, and .trend-pct cell
   styles were lifted to shared code/assets/css/tools.css ("Keyword-results-
   table toolkit") so ORC / KGA / the Keyword Tools family inherit them.
   Only SVC's per-column widths remain tool-local (above). */