/* ---------------------------------------------------------------------------
   Free tier: the preview panel, the trial banner and the unlock call to action.

   Same tokens as the rest of TraceFind — near-black surfaces, 1px hairline
   borders, #ededed primary button, #f5d984 gold accent for anything that marks
   the trial. Every class is `tf-free-*` prefixed because this file loads on
   pages that already carry Webflow, Tailwind and Geist class names.

   Note on the blurred rows: they are pure CSS bars with no text content. There
   is no hidden result markup anywhere in this component — the browser is never
   sent the data, so there is nothing to un-blur. See Backend/tiers.py.
   --------------------------------------------------------------------------- */

/* Tokens live on :root as well as .tf-free so the shared components
   (.tf-free-btn, .tf-free-chip) work anywhere on the page, not only inside a
   .tf-free wrapper. An unresolved var() computes to `unset`, which silently
   turned the white button transparent when it was used as a standalone
   element — the names are namespaced, so hoisting them is safe. */
:root,
.tf-free {
    --tf-free-surface: #0a0a0a;
    --tf-free-raised: hsla(0, 0%, 100%, 0.024);
    --tf-free-border: hsla(0, 0%, 100%, 0.12);
    --tf-free-border-strong: hsla(0, 0%, 100%, 0.22);
    --tf-free-fg: #ededed;
    --tf-free-muted: #a1a1a1;
    --tf-free-faint: #7d7d7d;
    --tf-free-accent: #f5d984;
}

/* ----------------------------------------------------------------- host ---
   Where the banner and the preview panel are rendered.

   This must be its own full-width block, NOT a child of the export card
   (#introduction). That card is a `display:flex` row, so a banner with
   `width:100%` dropped into it consumed the entire line and starved the
   results column next to it down to 0px wide — which rendered as a tall,
   empty box with the panel squeezed invisibly inside it. */
.tf-free-host {
    width: 100%;
}

.tf-free-host:empty {
    display: none;
}

/* --------------------------------------------------------------- banner ---
   Sits above the search box while the visitor is on the trial. */
.tf-free-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 16px auto;
    padding: 10px 14px;
    background: var(--tf-free-surface);
    border: 1px solid var(--tf-free-border);
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tf-free-muted);
    box-sizing: border-box;
}

.tf-free-banner-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--tf-free-accent);
}

.tf-free-banner strong {
    color: var(--tf-free-fg);
    font-weight: 600;
}

.tf-free-banner-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.tf-free-banner a {
    flex-shrink: 0;
    color: var(--tf-free-accent);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tf-free-banner a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------- the panel --- */
.tf-free-panel {
    width: 100%;
    max-width: 640px;
    margin: 8px auto 0 auto;
    background: var(--tf-free-surface);
    border: 1px solid var(--tf-free-border);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
    animation: tf-free-in 0.24s ease-out both;
}

@keyframes tf-free-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.tf-free-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tf-free-border);
    background: var(--tf-free-raised);
}

.tf-free-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid rgba(245, 217, 132, 0.28);
    border-radius: 5px;
    background: rgba(245, 217, 132, 0.1);
    color: var(--tf-free-accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tf-free-chip svg {
    width: 11px;
    height: 11px;
}

.tf-free-head-term {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--tf-free-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-free-head-term b {
    color: var(--tf-free-fg);
    font-weight: 500;
}

.tf-free-body {
    padding: 18px;
}

.tf-free-lede {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-free-muted);
}

.tf-free-lede b {
    color: var(--tf-free-fg);
    font-weight: 600;
}

/* --------------------------------------------------------- count tiles --- */
.tf-free-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.tf-free-tile {
    padding: 14px;
    background: var(--tf-free-raised);
    border: 1px solid var(--tf-free-border);
    border-radius: 10px;
}

.tf-free-tile-count {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tf-free-fg);
    font-variant-numeric: tabular-nums;
}

.tf-free-tile-count[data-zero='true'] {
    color: var(--tf-free-faint);
}

.tf-free-tile-label {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tf-free-fg);
}

.tf-free-tile-note {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--tf-free-faint);
}

/* ------------------------------------------------------- redacted rows ---
   Decorative only. No result text exists in the DOM to reveal. */
.tf-free-redacted {
    position: relative;
    padding: 14px 16px;
    border: 1px solid var(--tf-free-border);
    border-radius: 10px;
    background: var(--tf-free-raised);
    overflow: hidden;
}

.tf-free-redacted-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.tf-free-redacted-dot,
.tf-free-redacted-bar {
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 4px;
}

.tf-free-redacted-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.tf-free-redacted-bar {
    height: 9px;
}

/* Staggered widths so the block reads as a list of records, not a loader. */
.tf-free-redacted-row:nth-child(1) .tf-free-redacted-bar {
    width: 45%;
}
.tf-free-redacted-row:nth-child(2) .tf-free-redacted-bar {
    width: 62%;
}
.tf-free-redacted-row:nth-child(3) .tf-free-redacted-bar {
    width: 36%;
}
.tf-free-redacted-row:nth-child(4) .tf-free-redacted-bar {
    width: 54%;
}

.tf-free-redacted-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.88));
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-size: 12px;
    font-weight: 500;
    color: var(--tf-free-muted);
}

.tf-free-redacted-veil svg {
    width: 13px;
    height: 13px;
    color: var(--tf-free-accent);
}

/* ---------------------------------------------------------- unlock CTA --- */
.tf-free-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--tf-free-border);
}

.tf-free-cta-copy {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tf-free-muted);
}

.tf-free-cta-copy strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tf-free-fg);
}

/* Matches the "Account" button in the top app bar. */
.tf-free-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--tf-free-fg);
    color: #0a0a0a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.tf-free-btn:hover {
    background: #cccccc;
}

.tf-free-btn svg {
    width: 14px;
    height: 14px;
}

.tf-free-btn-ghost {
    background: transparent;
    color: var(--tf-free-fg);
    box-shadow: 0 0 0 1px var(--tf-free-border);
}

.tf-free-btn-ghost:hover {
    background: hsla(0, 0%, 100%, 0.06);
    box-shadow: 0 0 0 1px var(--tf-free-border-strong);
}

.tf-free-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 4px hsla(0, 0%, 100%, 0.4);
}

/* ------------------------------------------------------- live counting ---
   Shown while a free search is still running. */
.tf-free-live {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tf-free-muted);
}

.tf-free-live-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid hsla(0, 0%, 100%, 0.18);
    border-top-color: var(--tf-free-accent);
    border-radius: 50%;
    animation: tf-free-spin 0.7s linear infinite;
}

@keyframes tf-free-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-free-panel {
        animation: none;
    }

    .tf-free-live-spinner {
        animation-duration: 2.4s;
    }
}

@media (max-width: 520px) {
    .tf-free-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tf-free-cta .tf-free-btn {
        width: 100%;
    }

    /* The banner is icon + sentence + spacer + link on one row. Below this
       width the link gets crushed against the text, so let it drop to its
       own line and retire the spacer that was holding them apart. */
    .tf-free-banner {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .tf-free-banner-spacer {
        display: none;
    }

    .tf-free-banner > span:not(.tf-free-banner-spacer) {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tf-free-body {
        padding: 14px;
    }

    /* Long values (an email address, a URL) have no spaces to break on and
       would otherwise push the panel wider than the screen. */
    .tf-free-head-term {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------- turnstile slot ---
   Shown when the widget cannot render, so the gap where a captcha belongs is
   never silently empty. */
.tf-turnstile-missing {
    max-width: 320px;
    padding: 10px 12px;
    border: 1px dashed rgba(229, 86, 75, 0.5);
    border-radius: 8px;
    background: rgba(229, 86, 75, 0.06);
    font-size: 12px;
    line-height: 1.5;
    color: #e5564b;
    text-align: left;
}

.tf-turnstile-missing code {
    padding: 1px 4px;
    border-radius: 3px;
    background: hsla(0, 0%, 100%, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #ededed;
}