/* Backlink Gap Analyzer - tool-specific overrides on top of shared
 * primitives in code/assets/css/tools.css.
 *
 * - Form labels above the user input and competitor textarea.
 * - View toggle in the sticky results header (Backlinks / Referring
 *   domains).
 * - Per-column widths for the two table shapes.
 * - Found-On count chip + tooltip pattern (re-uses the floating
 *   tooltip approach KGA / DAC use).
 * - Followed badges.
 */

/* ========================================================================
   Form labels
   ======================================================================== */
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 14px 0 6px 0;
}
.field-label:first-child {
    margin-top: 0;
}
.field-hint {
    margin-left: 6px;
    color: var(--ink-500);
    font-weight: 400;
    font-size: 12px;
}
.bulk-count.is-over {
    color: var(--brand-red);
    font-weight: 600;
}

/* Free-tier hint under the form. */
.form-hint {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    background: var(--ink-50);
    color: var(--ink-700);
    font-size: 13px;
}
.form-hint a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.form-hint a:hover {
    text-decoration: underline;
}

/* ========================================================================
   View toggle (Backlinks / Referring domains)
   ======================================================================== */
.view-toggle {
    display: inline-flex;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    padding: 2px;
    margin: 0 8px;
}
.view-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-600);
    cursor: pointer;
    border-radius: calc(var(--r-sm) - 2px);
    transition: background 0.12s ease, color 0.12s ease;
}
.view-btn:hover {
    color: var(--ink);
}
.view-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

/* ========================================================================
   Results table
   ======================================================================== */
.results-table th.th-num,
.results-table td.td-num {
    text-align: center;
    font-feature-settings: var(--tnum);
    min-width: 80px;
}
.results-table td.td-num {
    font-size: 15px;
    font-weight: 600;
}
.results-table td.td-num.is-muted {
    color: var(--ink-400);
    font-weight: 400;
}

.results-table th[data-col="source_url"]      { min-width: 260px; width: 30%; }
.results-table th[data-col="source_domain"]   { min-width: 180px; }
.results-table th[data-col="anchor_text"]     { min-width: 160px; }
.results-table th[data-col="anchor_sample"]   { min-width: 160px; }
.results-table th[data-col="target_url"]      { min-width: 200px; }
.results-table th[data-col="backlink_count"]  { min-width: 70px; }

/* Cell link colour override only. The underline-on-hover effect comes
 * from the shared `.cell-link` rule in tools.css (which uses a
 * `border-bottom` rather than `text-decoration` so the underline
 * doesn't run through descender shapes or the trailing
 * external-link icon). Adding `text-decoration: underline` here
 * would stack a second underline on hover. */
.results-table .cell-link {
    color: var(--brand);
    word-break: break-all;
}
.results-table .cell-anchor {
    color: var(--ink-700);
    word-break: break-word;
}
.results-table .cell-anchor.is-muted {
    color: var(--ink-400);
    font-style: italic;
}

/* Followed / Nofollow badges */
.followed-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.followed-badge.is-followed {
    background: #dcfce7;
    color: #166534;
}
.followed-badge.is-nofollow {
    background: var(--ink-100);
    color: var(--ink-500);
}
.followed-badge.is-muted {
    color: var(--ink-400);
}

/* DA / PR badges - share the BLC thresholds via classes. */
.metric-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    min-width: 36px;
    text-align: center;
    font-feature-settings: var(--tnum);
}
.metric-badge.is-high   { background: #dcfce7; color: #166534; }
.metric-badge.is-medium { background: #fef9c3; color: #854d0e; }
.metric-badge.is-low    { background: #fee2e2; color: #991b1b; }
.metric-badge.is-muted  { background: transparent; color: var(--ink-300); font-weight: 400; }

/* Found-On column.
 *
 * One pill per competitor that surfaced the gap. Up to 3 inline pills
 * if they fit; otherwise 2 pills + an overflow "+N websites" pill
 * whose floating tooltip lists every label (see tool.js
 * renderFoundOnPills for the visible/hidden rules).
 */
.results-table td.td-found-on {
    text-align: left;
    padding: 6px 18px 6px 8px;
    line-height: 1.5;
    min-width: 180px;
    vertical-align: middle;
}

.found-on-pill {
    display: inline-block;
    padding: 2px 9px;
    margin: 2px 3px 2px 0;
    background: var(--brand-50, #f4f9ff);
    color: var(--brand-700, var(--brand));
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
    font-feature-settings: var(--tnum);
}
.found-on-pill.found-on-overflow {
    background: var(--ink-50);
    color: var(--ink-700);
    cursor: help;
    font-weight: 600;
}
.found-on-pill.found-on-overflow:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.found-on-empty {
    color: var(--ink-400);
}

/* ========================================================================
   Results subhead - your-vs-theirs summary chip
   ======================================================================== */
.results-subhead {
    padding: 10px 16px 10px 16px;
    font-size: 12.5px;
    color: var(--ink-600);
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
}
.results-subhead strong {
    color: var(--ink);
    font-weight: 600;
}
.results-subhead .subhead-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-700);
}
.results-subhead .subhead-pill .subhead-num {
    font-weight: 700;
    color: var(--ink);
    font-feature-settings: var(--tnum);
}

/* ========================================================================
   Floating tooltip used by the Found-On chip
   ======================================================================== */
.found-on-tooltip {
    position: fixed;
    z-index: 99999;
    background: var(--ink);
    color: #fff;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    white-space: pre-line;
    max-width: 280px;
}

/* Disabled primary button */
.primary-btn:disabled,
.primary-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}