/* Website Authority Checker - tool-specific styles on top of the
 * shared tool primitives in code/assets/css/tools.css.
 *
 * Cross-tool primitives (mode toggle, input form, primary/ghost button,
 * progress region, errors region, results region, table base, sortable
 * headers, pagination, toasts, history region, sticky chrome, debug
 * panel, upgrade banner, cell-xlink, empty-state) live in tools.css.
 * Only the bits genuinely specific to this tool sit here:
 *
 *   1. Per-column widths on the 6-column results table.
 *   2. WA badge tiers (0-29 low / 30-59 medium / 60+ high). DA is
 *      rendered as a plain numeric cell - no tiered pill - so WA's
 *      badge stays the visually distinct headline.
 *   3. PR cell missing-data indicator.
 *   4. Daily lookup quota chip (free / anonymous only).
 */

/* ========================================================================
   Form layout - single input + submit, no country / type select since
   WAC only takes domains.
   ======================================================================== */
.input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
.input-row .text-input {
    flex: 1 1 320px;
    min-width: 240px;
}
.input-row .primary-btn {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .input-row {
        gap: 8px;
    }
    .input-row .text-input {
        flex-basis: 100%;
    }
    .input-row .primary-btn {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Daily lookup quota chip (free / anonymous only). Same shape as DAC's.
   ======================================================================== */
.quota-region {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.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: 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 - per-column sizing.

   Six columns: Domain, DA, PR, Linking Domains, Followed Linking Domains, WA.
   WA gets the widest visual weight since it's the headline.
   ======================================================================== */
.results-table th[data-col="domain"] {
    width: 26%;
    min-width: 200px;
    text-align: left;
}
.results-table th[data-col="domain_authority"] {
    width: 9%;
    min-width: 68px;
}
.results-table th[data-col="page_rank"] {
    width: 9%;
    min-width: 68px;
}
.results-table th[data-col="linking_domains_total"],
.results-table th[data-col="linking_domains_followed"] {
    width: 16%;
    min-width: 130px;
}
.results-table th[data-col="website_authority"] {
    width: 14%;
    min-width: 110px;
}

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

.results-table .td-domain {
    color: var(--ink);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.1px;
    word-break: break-all;
}
.results-table .td-domain .resolved-line {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-500);
    margin-top: 2px;
}

.results-table .td-domain_authority,
.results-table .td-page_rank,
.results-table .td-linking_domains_total,
.results-table .td-linking_domains_followed,
.results-table .td-website_authority {
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: var(--tnum);
    text-align: right;
}
.results-table .td-domain_authority {
    font-size: 16px;
    font-weight: 700;
}
.results-table .td-website_authority {
    font-size: 18px;
    font-weight: 800;
}
.results-table .td-no-data {
    color: var(--ink-400);
    font-weight: 500;
}

/* WA tier badge: 0-29 low, 30-59 medium, 60+ high. WA is the headline
   metric so it's the only tiered pill in this table; DA renders as a
   plain numeric cell, intentionally. */
.wa-badge {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 56px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-feature-settings: var(--tnum);
    font-size: 17px;
    font-weight: 800;
}
.wa-badge--low    { background: var(--ink-100); color: var(--ink-700); }
.wa-badge--medium { background: rgba(56, 130, 220, 0.18); color: rgb(36, 92, 168); }
.wa-badge--high   { background: rgba(22, 163, 74, 0.20);  color: rgb(15, 109, 49); }

/* PR cell - the "no PR" indicator surfaces when page_rank_missing=true. */
.pr-missing {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--ink-400);
    font-weight: 500;
}
.pr-missing-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Modal chrome (.modal-backdrop, .modal-card, .modal-title, .modal-body,
   .modal-actions, .invalid-list) lives in shared code/assets/css/tools.css.
   WAC's invalid-inputs modal uses those primitives directly. */

.primary-btn:disabled,
.ghost-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}