/*
 * vb-scan widget.
 *
 * Every rule is scoped under #vb-scan. The host is an Uncode page whose theme
 * CSS is broad and aggressive, so the widget states its own values for anything
 * it depends on rather than inheriting and hoping.
 *
 * Fonts are NOT loaded here: the theme already serves Sora and IBM Plex Mono,
 * and a second copy would cost a render-blocking request on the page whose
 * speed we are about to grade.
 */

#vb-scan {
    --vb-ink: #191919;
    --vb-paper: #F6F4F0;
    --vb-orange: #ED5931;
    --vb-line: rgba(0, 0, 0, .14);
    --vb-muted: #6b6b6b;
    --vb-body: #3d3d3d;

    box-sizing: border-box;
    width: 100%;
    background: transparent;
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--vb-ink);
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
    display: flex;
    flex-direction: column;
}

#vb-scan *,
#vb-scan *::before,
#vb-scan *::after { box-sizing: border-box; }

#vb-scan p { margin: 0 0 12px; color: var(--vb-body); }
#vb-scan h2, #vb-scan h3 { margin: 0; color: var(--vb-ink); font-weight: 600; letter-spacing: -.01em; }

#vb-scan .vb-label {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vb-muted);
    margin: 0 0 10px;
}

#vb-scan .vb-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--vb-muted);
}

#vb-scan .vb-foot {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vb-muted);
}

/* The quiet paid-report line under the gate footnote: muted, underlined, no button. */
#vb-scan .vb-gate-buy { margin-top: 6px; }
#vb-scan .vb-gate-buy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* -- controls ---------------------------------------------------------- */

#vb-scan input[type="url"],
#vb-scan input[type="email"],
#vb-scan input[type="text"] {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--vb-ink);
    background: #fff;
    border: 1px solid var(--vb-line);
    border-radius: 6px;
    padding: 13px 14px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

#vb-scan input:focus-visible,
#vb-scan button:focus-visible,
#vb-scan a:focus-visible {
    outline: 2px solid var(--vb-orange);
    outline-offset: 2px;
}

#vb-scan .vb-btn {
    display: inline-block;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--vb-orange);
    border: 0;
    border-radius: 6px;
    padding: 14px 22px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .15s ease;
}

#vb-scan .vb-btn:hover { background: var(--vb-ink); }
#vb-scan .vb-btn[disabled] { opacity: .55; cursor: default; background: var(--vb-orange); }

#vb-scan .vb-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--vb-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

#vb-scan .vb-link:hover { color: var(--vb-ink); }

#vb-scan .vb-row { display: flex; gap: 10px; align-items: stretch; }
#vb-scan .vb-row > input { flex: 1 1 auto; min-width: 0; }
#vb-scan .vb-row > .vb-btn { flex: 0 0 auto; }

/* -- states ------------------------------------------------------------ */

#vb-scan .vb-state { display: none; flex-direction: column; flex: 1 1 auto; }
#vb-scan .vb-state.is-active { display: flex; }

#vb-scan .vb-h {
    font-size: 25px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -.015em;
}

#vb-scan .vb-error {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 6px;
    background: rgba(237, 89, 49, .10);
    border: 1px solid rgba(237, 89, 49, .35);
    color: #8f2f14;
    font-size: 14px;
}

/*
 * The one rule outside #vb-scan. On the scan page, the heading row above the
 * widget carries the class vb-scan-intro; widget.js sets vb-scan-active on
 * <html> while a scan or its result is showing, and the intro steps aside.
 * It stays in the source, so the page still has its H1 for search.
 */
html.vb-scan-active .vb-scan-intro { display: none !important; }

/* -- scanning ---------------------------------------------------------- */

/*
 * The stage: on the scan page the widget sits in a full-width row, so the
 * scan gets the screen while it runs — a mark, the host, a bar that says
 * "working", the checks, and a fact underneath. In a narrow column it is the
 * same stack, only shorter.
 */
#vb-scan .vb-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(60vh, 560px);
    padding: 32px 0;
    text-align: center;
}

#vb-scan .vb-stage .vb-h { font-size: clamp(22px, 3vw, 30px); }

/* The logo's orange dot, breathing. */
#vb-scan .vb-mark {
    width: 14px;
    height: 14px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--vb-orange);
    animation: vb-breathe 1.6s ease-in-out infinite;
}

@keyframes vb-breathe {
    50% { transform: scale(1.6); opacity: .45; }
}

#vb-scan .vb-bar {
    width: min(320px, 100%);
    height: 3px;
    margin: 20px 0 6px;
    border-radius: 3px;
    background: var(--vb-line);
    overflow: hidden;
}

#vb-scan .vb-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--vb-orange);
    transition: width .2s linear;
}

#vb-scan .vb-stage .vb-ticks { display: inline-block; text-align: left; }

#vb-scan .vb-facts {
    max-width: 520px;
    margin-top: 36px;
}

#vb-scan .vb-facts .vb-label { margin-bottom: 8px; }

#vb-scan .vb-fact {
    margin: 0;
    font-size: 15px;
    color: var(--vb-body);
    opacity: 1;
    transition: opacity .25s ease;
}

#vb-scan .vb-fact.is-out { opacity: 0; }

/* The result arriving after the stage, rather than replacing it in a frame. */
#vb-scan .vb-state.is-entering { animation: vb-enter .35s ease-out; }

@keyframes vb-enter {
    from { opacity: 0; transform: translateY(6px); }
}

#vb-scan .vb-ticks { margin: 18px 0 0; padding: 0; list-style: none; }

/*
 * The whole list is present from the first frame and the highlight travels
 * through it, cycling until the scan settles. The earlier version faded each
 * name in once and stopped, which fixed the animation's length at the number
 * of checks rather than the length of the scan.
 */
#vb-scan .vb-tick {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--vb-muted);
    opacity: .4;
    transition: opacity .2s ease, color .2s ease;
}

/* The check being read now, and the ones already read behind it. */
#vb-scan .vb-tick.is-live { opacity: 1; color: var(--vb-ink); }
#vb-scan .vb-tick.is-done { opacity: .75; color: var(--vb-ink); }

#vb-scan .vb-tick i { font-style: normal; color: var(--vb-orange); }
#vb-scan .vb-tick.is-live i { animation: vb-pulse .9s ease-in-out infinite; }

@keyframes vb-pulse { 50% { opacity: .2; } }

/* The travelling highlight is motion too: widget.js marks every name read and
   never starts the cycle, so these rules only have a still list to style. */
@media (prefers-reduced-motion: reduce) {
    #vb-scan .vb-tick { opacity: 1; transition: none; }
    #vb-scan .vb-tick i { animation: none; }
    #vb-scan .vb-mark { animation: none; }
    #vb-scan .vb-fact { transition: none; }
    #vb-scan .vb-state.is-entering { animation: none; }
}

/* -- findings ---------------------------------------------------------- */

/*
 * The header leads with the finding, not the arithmetic. A ratio reads as a
 * score, and a score above about seventy reassures — the opposite of what an
 * honest result should do here.
 */
#vb-scan .vb-head {
    /* Inline flow, not flex: the count is a full sentence when a scan finds
       nothing, and flex would wrap it to its own line leaving the separator
       dangling at the end of the host. */
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

#vb-scan .vb-head-host { font-weight: 600; }
#vb-scan .vb-head-sep { color: var(--vb-muted); font-weight: 400; margin: 0 .4em; }
#vb-scan .vb-head-count { color: var(--vb-orange); }

#vb-scan .vb-head-lead {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--vb-ink);
    max-width: 46ch;
}

/* Quiet, and deliberately not styled as a finding. */
#vb-scan .vb-head-unverified {
    margin: 8px 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--vb-muted);
}

/* One square per check, filled for the ones on screen. */
#vb-scan .vb-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 2px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--vb-line);
}

#vb-scan .vb-pips { display: flex; gap: 5px; flex: 0 0 auto; }

#vb-scan .vb-pip {
    width: 11px;
    height: 11px;
    border: 1px solid var(--vb-line);
    background: transparent;
}

#vb-scan .vb-pip.is-on { background: var(--vb-ink); border-color: var(--vb-ink); }

#vb-scan .vb-progress-note {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vb-muted);
}

#vb-scan .vb-finding { padding: 14px 0; border-bottom: 1px solid var(--vb-line); }

#vb-scan .vb-finding-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

#vb-scan .vb-tag {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 3px;
    background: #cdc8c0;
    color: #4a4a4a;
    flex: 0 0 auto;
}

#vb-scan .vb-tag.is-fail { background: var(--vb-orange); color: #fff; }
#vb-scan .vb-tag.is-warn { background: var(--vb-ink); color: var(--vb-paper); }
#vb-scan .vb-tag.is-pending { background: transparent; color: var(--vb-muted); border: 1px dashed var(--vb-line); }
#vb-scan .vb-tag.is-ours { background: transparent; color: var(--vb-muted); border: 1px dashed var(--vb-muted); }

/* The full list reads by topic. Tag Manager leads the tracking section. */
#vb-scan .vb-section {
    margin: 22px 0 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--vb-ink);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vb-muted);
}
#vb-scan .vb-finding.is-lead { background: #fff; padding-left: 12px; padding-right: 12px; }
#vb-scan .vb-finding.is-sub { padding-left: 18px; }

/* One box instead of the same caveat on every finding. */
#vb-scan .vb-unseen { margin-top: 20px; padding: 14px 16px; background: #fff; border: 1px solid var(--vb-line); }
#vb-scan .vb-unseen .vb-label { margin-bottom: 6px; }
#vb-scan .vb-unseen-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--vb-body); }

/*
 * Unverified is neither the green of a pass nor the amber of a finding: we
 * looked and could not tell, and the badge should carry exactly that weight
 * and no more.
 */
#vb-scan .vb-tag.is-unverified {
    background: transparent;
    color: var(--vb-muted);
    border: 1px solid var(--vb-line);
}

#vb-scan .vb-finding-name { font-weight: 600; }

#vb-scan .vb-finding-result {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--vb-orange);
}

#vb-scan .vb-finding-note { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--vb-body); }

/* -- gate -------------------------------------------------------------- */

#vb-scan .vb-gate {
    margin-top: 18px;
    padding: 18px;
    border: 1px dashed var(--vb-line);
    border-radius: 8px;
}

#vb-scan .vb-gate .vb-label { margin-bottom: 12px; }
#vb-scan .vb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#vb-scan .vb-offer {
    margin-top: 18px;
    padding: 22px;
    border: 2px solid var(--vb-orange);
    border-radius: 8px;
    background: #fff;
}
#vb-scan .vb-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
#vb-scan .vb-offer .vb-h { font-size: 19px; }
#vb-scan .vb-offer-price { font-size: 22px; font-weight: 600; color: var(--vb-ink); white-space: nowrap; }
#vb-scan .vb-offer-btn { display: block; margin-top: 4px; }

/* Free scan versus Lead Leak Report: two rows, label left, what you get right. */
#vb-scan .vb-compare { margin: 4px 0 16px; }
#vb-scan .vb-compare-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--vb-line);
    font-size: 14px;
    line-height: 1.5;
}
#vb-scan .vb-compare-row:last-child { border-bottom: 1px solid var(--vb-line); }
#vb-scan .vb-compare dt { font-weight: 600; color: var(--vb-ink); }
#vb-scan .vb-compare dd { margin: 0; color: var(--vb-body); }

/* The fix line: one secondary line, never a second card competing with the offer. */
#vb-scan .vb-fix { margin: 18px 0 0; font-size: 15px; color: var(--vb-body); }
#vb-scan .vb-fix a { color: var(--vb-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#vb-scan .vb-fix a:hover { color: var(--vb-orange); }

#vb-scan .vb-spacer { flex: 1 1 auto; }
#vb-scan .vb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

#vb-scan .vb-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    #vb-scan .vb-h { font-size: 21px; }
    #vb-scan .vb-compare-row { grid-template-columns: 1fr; gap: 2px; }
    #vb-scan .vb-row { flex-direction: column; }
    #vb-scan .vb-row > .vb-btn { width: 100%; }
}