/* ═══════════════════════════════════════════════════════════════════
   WAVE 3 BATCH B - Single-URL & Specialty
     - carbon-footprint-checker  (server)
     - csp-generator-from-url    (server)
     - typo-squatting-detector   (server)
     - title-tag-ctr-predictor   (client)
   Prefix: w3bb-
═══════════════════════════════════════════════════════════════════ */

/* ─── Shared cards / sections ─── */
.w3bb-card {
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.w3bb-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.w3bb-card__hint {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 6px;
}

.w3bb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ─── Stat tiles ─── */
.w3bb-stat {
    flex: 1 1 180px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
}

.w3bb-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.w3bb-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.15;
}

.w3bb-stat__sub {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 2px;
}

/* ─── Verdict badges ─── */
.w3bb-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.w3bb-verdict--green   { background: #DCFCE7; color: #15803D; }
.w3bb-verdict--good    { background: #ECFCCB; color: #4D7C0F; }
.w3bb-verdict--avg     { background: #FEF3C7; color: #B45309; }
.w3bb-verdict--high    { background: #FFEDD5; color: #C2410C; }
.w3bb-verdict--severe  { background: #FEE2E2; color: #B91C1C; }

/* ─── Comparison list (carbon) ─── */
.w3bb-cmp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.w3bb-cmp li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #334155;
}
.w3bb-cmp li i {
    color: #0EA5E9;
    font-size: 1.05rem;
}

/* ─── CSP block ─── */
.w3bb-csp-block {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
}

.w3bb-csp-copy {
    position: absolute;
    top: 8px;
    right: 8px;
}

.w3bb-directives {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.w3bb-directives th,
.w3bb-directives td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: top;
}
.w3bb-directives th {
    background: #F8FAFC;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}
.w3bb-directive-name {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-weight: 600;
    color: #1D4ED8;
}
.w3bb-source-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: #334155;
}

.w3bb-warn {
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: #92400E;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.w3bb-warn i { color: #B45309; }

/* ─── Typo-squat table ─── */
.w3bb-tsd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.w3bb-tsd-table th,
.w3bb-tsd-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #E2E8F0;
}
.w3bb-tsd-table th {
    background: #F8FAFC;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}
.w3bb-tsd-domain {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    color: #0F172A;
}
.w3bb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.w3bb-badge--reg { background: #FEE2E2; color: #B91C1C; }
.w3bb-badge--avail { background: #DCFCE7; color: #15803D; }
.w3bb-badge--type { background: #E0E7FF; color: #4338CA; }

/* ─── CTR predictor (client-side) ─── */
.w3bb-ctr {
    display: grid;
    gap: 18px;
}

.w3bb-ctr__textarea {
    width: 100%;
    min-height: 92px;
    padding: 12px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.45;
}
.w3bb-ctr__textarea:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.w3bb-ctr__count {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 4px;
}

.w3bb-ctr__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}
@media (max-width: 767px) {
    .w3bb-ctr__layout { grid-template-columns: 1fr; }
}

.w3bb-gauge {
    display: flex;
    align-items: center;
    gap: 18px;
}
.w3bb-gauge__circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color, #94A3B8) calc(var(--gauge-pct, 0) * 1%), #E2E8F0 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
}
.w3bb-gauge__circle::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #fff;
}
.w3bb-gauge__num {
    position: relative;
    z-index: 1;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gauge-color, #475569);
}
.w3bb-gauge__meta {
    flex: 1;
}
.w3bb-gauge__verdict {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.w3bb-gauge__ctr {
    font-size: 0.875rem;
    color: #475569;
}
.w3bb-gauge__ctr strong {
    font-size: 1.1rem;
    color: #0F172A;
}

/* SERP preview */
.w3bb-serp {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
    max-width: 600px;
    font-family: arial, sans-serif;
}
.w3bb-serp__url {
    color: #006621;
    font-size: 0.8125rem;
    margin-bottom: 2px;
}
.w3bb-serp__title {
    color: #1A0DAB;
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 580px;
}
.w3bb-serp__title:hover { text-decoration: underline; cursor: pointer; }
.w3bb-serp__meta {
    color: #545454;
    font-size: 0.875rem;
    line-height: 1.45;
}
.w3bb-serp__truncated {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #B91C1C;
}

/* Breakdown */
.w3bb-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.w3bb-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    background: #F8FAFC;
    border-radius: 8px;
    font-size: 0.875rem;
    gap: 12px;
}
.w3bb-breakdown__rule { color: #334155; }
.w3bb-breakdown__delta { font-weight: 700; flex-shrink: 0; }
.w3bb-breakdown__delta--pos { color: #15803D; }
.w3bb-breakdown__delta--neg { color: #B91C1C; }
.w3bb-breakdown__delta--zero { color: #64748B; }

/* Suggestions */
.w3bb-suggest {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.w3bb-suggest li {
    padding: 8px 12px;
    border-left: 3px solid #6366F1;
    background: #EEF2FF;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #3730A3;
}
.w3bb-suggest li i { margin-right: 6px; }

/* Misc */
details.w3bb-details {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
}
details.w3bb-details > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: #1D4ED8;
}
details.w3bb-details[open] > summary { margin-bottom: 8px; }