/* ==========================================================================
   tf-cards.css — result cards on the email and username pages.

   1. Every card in the results grid has the same width at every screen size:
      one column on phones, then as many equal columns as fit. Cards in a row
      share its height, so a card with enrichment data no longer turns into a
      full-width band between rows of small cards.
   2. Site logos from js/tf-cards.js: bundled file, fetched favicon on a light
      tile, or a letter badge.
   3. Lists of records inside a card (WHOXY's domains, nested objects).

   Loaded after each page's inline <style>, which still styles the card body;
   the !important flags beat the older flex/percentage widths set there.
   ========================================================================== */

/* ---- 1. Grid ------------------------------------------------------------ */
.container.tf-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch;
    overflow: visible;
}

.container.tf-card-grid > .widget,
.container.tf-card-grid > .widget:not(:has(.info-item)),
.container.tf-card-grid > .widget.has-details {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    grid-column: auto !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 18px !important;
    border-radius: 12px;
    box-sizing: border-box;
}

.container.tf-card-grid > .widget .info {
    margin: 0 !important;
    width: 100%;
    min-width: 0;
}

.container.tf-card-grid > .widget .info h2 {
    font-size: 19px !important;
    font-weight: 500;
    line-height: 1.25;
    gap: 12px;
    margin: 0 !important;
    min-width: 0;
}

/* Long site names end in an ellipsis instead of wrapping the heading. */
.container.tf-card-grid > .widget .info h2 .tf-site-name,
.container.tf-card-grid > .widget .info h2 .uname-site {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    font-weight: 500;
}

/* Rows under the heading: a divider, then the fields. */
.container.tf-card-grid > .widget .info h2 + .info-item,
.container.tf-card-grid > .widget .info h2 + * {
    margin-top: 12px;
    border-top: 1px solid #27272a;
    padding-top: 10px;
}

.container.tf-card-grid > .widget .info-item {
    font-size: 14px;
    padding: 6px 0;
    gap: 12px;
    border-bottom: 1px solid #1f1f23;
}

.container.tf-card-grid > .widget .info-item:last-child {
    border-bottom: 0;
}

.container.tf-card-grid > .widget .info-item .key,
.container.tf-card-grid > .widget .info-item .value {
    font-size: 14px;
}

.container.tf-card-grid > .widget .info-item .key {
    color: #a1a1aa;
    font-weight: 500;
}

/* ---- 2. Logos ----------------------------------------------------------- */
.widget .info h2 .tf-logo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    border-radius: 10px !important;
    object-fit: contain;
    box-sizing: border-box;
}

/* Logos and favicons are drawn for light backgrounds (GitHub's is black on
   clear): one light tile keeps every one of them visible on the dark card and
   makes bundled and fetched icons look alike. */
.widget .info h2 img.tf-logo {
    padding: 6px;
    background: #f4f4f5;
}

.widget .info h2 .tf-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2a2a2e, #161618);
    border: 1px solid #3f3f46;
    color: #e4e4e7;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
}

/* ---- 3. Record lists ---------------------------------------------------- */
.widget .info .info-item.tf-info-block {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.widget .info .info-item.tf-info-block > .key {
    max-width: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.widget .info .tf-rec-count {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(207, 54, 45, 0.14);
    border: 1px solid rgba(207, 54, 45, 0.4);
    color: #f0786f;
    font-size: 11px;
    font-weight: 600;
}

.widget .tf-rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.widget .tf-rec {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #27272a;
    border-radius: 8px;
    background: #111113;
    text-align: left;
}

.widget .info .tf-rec-title {
    font-size: 14px;
    font-weight: 600;
    color: #ededed;
    overflow-wrap: anywhere;
}

/* Secondary fields as a small label-over-value grid: two or three per row
   depending on the card's width. */
.widget .info .tf-rec-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 4px 10px;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #d4d4d8;
}

.widget .info .tf-rec-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.widget .info .tf-rec-meta-item,
.widget .info .tf-rec-meta-item * {
    font-weight: 400;
    overflow-wrap: anywhere;
}

.widget .info .tf-rec-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #71717a;
}

.widget .tf-rec a {
    color: #e5564b;
    text-decoration: none;
    white-space: normal;
}

.widget .tf-rec-list > .tf-rec-extra {
    display: none;
}

.widget .tf-rec-open .tf-rec-list > .tf-rec-extra {
    display: flex;
}

.widget button.tf-rec-more {
    align-self: flex-start;
    margin-top: 2px;
    padding: 4px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #e5564b;
}

.widget button.tf-rec-more:hover {
    color: #ff6f63;
}

/* Masonry mode (js/tf-cards.js → tfMasonry): 2px rows, each card spans its own
   height; the vertical gap is folded into that span. Cards must keep their
   content height (never stretch to the span), or they would grow forever. */
.container.tf-card-grid.tf-masonry {
    grid-auto-rows: 2px;
    row-gap: 0 !important;
    column-gap: 14px !important;
    align-items: start !important;
}

.container.tf-card-grid.tf-masonry > .widget {
    align-self: start !important;
}

/* ---- 4. Results layout (js/tf-cards.js → tfResultsLayout) --------------- */
/* Once a search shows results, the hero column (sized to the 600px search box
   until then) takes the page's full content width. overflow: clip instead of
   hidden on the hero root keeps the dashed frame clipped without making it a
   scroll container, which would stop the rail from sticking. */
body.tf-results-on .intro_intro__k2TZw,
body.tf-results-on .intro_intro__k2TZw .intro_buttons__hi64e {
    width: 100%;
    box-sizing: border-box;
}

body.tf-results-on .intro_root__wSBQl {
    overflow: clip;
}

#loaded_items:has(> .tf-results) {
    align-self: stretch;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
    text-align: left;
}

body.tf-results-on #introduction {
    align-self: stretch;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.tf-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
    text-align: left;
}

.tf-results.tf-results-empty {
    display: none;
}

.tf-results-main {
    min-width: 0;
}

/* Email's breach / mailbox / domain-warning cards above the result cards:
   full width of the main column (the page's own CSS caps them at 600px). */
.tf-results-meta > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.tf-results-meta > div:has(> div:not(:empty)) {
    margin-bottom: 14px;
}

.tf-results-meta > div > div:empty {
    display: none;
}

.tf-results-meta .tf-card,
.tf-results-meta .tf-warn {
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.tf-results-meta .tf-warn + .tf-warn {
    margin-top: 10px;
}

.tf-results-nomatch {
    margin: 0 0 14px;
    padding: 18px;
    border: 1px dashed #3f3f46;
    border-radius: 12px;
    color: #a1a1aa;
    font-size: 14px;
    text-align: center;
}

.tf-results-none {
    margin: 0 0 14px;
    padding: 18px;
    border: 1px dashed #3f3f46;
    border-radius: 12px;
    color: #a1a1aa;
    font-size: 14px;
    text-align: center;
}

.tf-masonry > .widget.tf-filtered {
    display: none !important;
}

.tf-card-grid > .widget {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    scroll-margin: 120px;
}

.tf-card-grid > .widget.tf-flash {
    border-color: #cf362d !important;
    box-shadow: 0 0 0 3px rgba(207, 54, 45, 0.35);
}

/* Rail */
.tf-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tf-ov,
.tf-ov-sites {
    border: 1px solid #27272a;
    border-radius: 12px;
    background: #0d0d0f;
    padding: 16px;
    box-sizing: border-box;
    min-width: 0;
}

.tf-ov-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tf-ov-kind,
.tf-ov-sites-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717a;
}

.tf-ov-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: #1c1c1f;
    color: #d4d4d8;
}

.tf-ov-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.tf-ov-status.is-running {
    color: #f0786f;
    background: rgba(207, 54, 45, 0.12);
}

.tf-ov-status.is-running .tf-ov-dot {
    animation: tf-ov-pulse 1.1s ease-in-out infinite;
}

.tf-ov-status.is-done {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1);
}

.tf-ov-status.is-failed {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
}

@keyframes tf-ov-pulse {
    50% {
        opacity: 0.25;
    }
}

.tf-ov-query {
    margin: 10px 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #fafafa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-ov-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

.tf-ov-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px 9px;
    border: 1px solid #1f1f23;
    border-radius: 9px;
    background: #141416;
    min-width: 0;
}

.tf-ov-stat b {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: #fafafa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tf-ov-stat span {
    font-size: 11.5px;
    color: #a1a1aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-ov-stat[data-tone='bad'] b {
    color: #f0786f;
}

.tf-ov-stat[data-tone='good'] b {
    color: #4ade80;
}

/* Word values (mailbox state) in a smaller size so they fit the tile. */
.tf-ov-stat[data-kind='text'] b {
    font-size: 13px;
    line-height: 23px;
    letter-spacing: -0.01em;
}

.tf-ov-stat[data-tone='muted'] b {
    color: #d4d4d8;
}

.tf-ov-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid #27272a;
    border-radius: 9px;
    background: #111113;
    color: #71717a;
    font-size: 13px;
    cursor: text;
}

.tf-ov-filter:focus-within {
    border-color: #52525b;
}

.tf-ov-filter input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fafafa;
    font: inherit;
    font-size: 14px;
}

.tf-ov-sites-head {
    margin-bottom: 10px;
}

.tf-ov-sites-count {
    color: #d4d4d8;
}

.tf-ov-list {
    display: flex;
    gap: 6px;
}

.tf-ov-site {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #d4d4d8;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.tf-ov-site:hover,
.tf-ov-site:focus-visible {
    background: #18181b;
    border-color: #27272a;
    color: #fafafa;
    outline: 0;
}

.tf-ov-site[hidden] {
    display: none;
}

.tf-ov-site > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-ov-site .tf-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    object-fit: contain;
    box-sizing: border-box;
}

.tf-ov-site img.tf-logo {
    padding: 3px;
    background: #f4f4f5;
}

.tf-ov-site .tf-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #27272a;
    color: #e4e4e7;
    font-size: 11px;
    font-weight: 600;
}

.tf-ov-site-more {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #cf362d;
}

/* Phones and tablets: the rail sits above the cards; the site list becomes a
   row of chips that scrolls sideways. */
@media (max-width: 1099px) {
    .tf-ov-list {
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .tf-ov-site {
        flex: 0 0 auto;
        max-width: 200px;
        border-color: #27272a;
        background: #141416;
        border-radius: 999px;
        padding: 5px 12px 5px 6px;
        scroll-snap-align: start;
    }

    .tf-ov-site .tf-logo {
        border-radius: 50%;
    }
}

@media (min-width: 640px) and (max-width: 1099px) {
    .tf-rail {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-ov {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-areas: 'head stats' 'query stats' 'filter filter';
        column-gap: 20px;
        align-items: start;
    }

    .tf-ov-head {
        grid-area: head;
    }

    .tf-ov-query {
        grid-area: query;
        margin-bottom: 0;
    }

    .tf-ov-stats {
        grid-area: stats;
    }

    .tf-ov-filter {
        grid-area: filter;
    }
}

/* Desktop: overview rail on the left, sticky while the cards scroll. */
@media (min-width: 1100px) {
    .tf-results {
        grid-template-columns: 284px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .tf-rail {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
    }

    .tf-ov {
        flex: 0 0 auto;
    }

    /* Mailbox check and breach summary side by side; the breach card takes
       the whole row once its details are open, and either one does when the
       other is missing. */
    .tf-results-meta > div {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .tf-results-meta > div > div:first-child,
    .tf-results-meta > div > div:nth-child(2):empty + div,
    .tf-results-meta > div > div:nth-child(2):has(+ div:empty),
    .tf-results-meta > div:has(.tf-leaks-panel:not([hidden])) > div {
        grid-column: 1 / -1;
    }

    .tf-results-meta > div > div:not(:first-child) > .tf-card {
        height: 100%;
        justify-content: center;
    }

    .tf-results-meta > div > div:not(:first-child) > .tf-card.tf-verify,
    .tf-results-meta > div > div:not(:first-child) > .tf-card.tf-leaks-card {
        justify-content: flex-start;
    }

    /* Next to the mailbox check, the breach rows take whatever height that
       card leaves and scroll, instead of the card padding out with space.
       (flex-basis 0 keeps a long list from making the row taller.) */
    .tf-results-meta > div:not(:has(.tf-leaks-panel:not([hidden]))) > div:nth-child(2):not(:empty) + div .tf-leaks-preview {
        flex: 1 1 0;
        min-height: 150px;
    }

    .tf-results-meta > div:not(:has(.tf-leaks-panel:not([hidden]))) > div:nth-child(2):not(:empty) + div .tf-leaks-rows {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
        scrollbar-color: #3f3f46 transparent;
        mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    }

    .tf-results-meta > div:not(:has(.tf-leaks-panel:not([hidden]))) > div:nth-child(2):not(:empty) + div .tf-leaks-row:nth-child(n + 4) {
        display: flex;
    }

    .tf-results-meta > div:not(:has(.tf-leaks-panel:not([hidden]))) > div:nth-child(2):not(:empty) + div .tf-leaks-preview-more {
        display: none;
    }

    .tf-ov-sites {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 0;
        padding: 14px 10px 10px;
    }

    .tf-ov-sites[hidden] {
        display: none;
    }

    .tf-ov-sites-head {
        padding: 0 6px;
    }

    .tf-ov-list {
        flex-direction: column;
        gap: 1px;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: #3f3f46 transparent;
    }
}

/* ---- 5. Breach card (email): numbers on top, then the breaches ---------- */
.tf-card.tf-leaks-card {
    align-items: stretch;
    text-align: left;
    gap: 14px;
}

.tf-leaks-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tf-leaks-top .tf-card-icon {
    flex: 0 0 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(207, 54, 45, 0.12);
    font-size: 16px !important;
}

.tf-leaks-top .tf-card-sub {
    margin-top: 2px !important;
}

.tf-leaks-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tf-leaks-mini > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #232326;
    border-radius: 9px;
    background: #0f0f11;
}

.tf-leaks-mini b {
    font-size: 15px;
    font-weight: 700;
    color: #fafafa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.tf-leaks-mini span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #71717a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-leaks-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.tf-leaks-preview-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717a;
}

.tf-leaks-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tf-leaks-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #232326;
    border-left: 3px solid rgba(207, 54, 45, 0.6);
    border-radius: 9px;
    background: #0f0f11;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tf-leaks-row:hover,
.tf-leaks-row:focus-visible {
    background: #161618;
    border-color: #3f3f46;
    border-left-color: #e5564b;
    outline: 0;
}

.tf-leaks-row.is-flagged {
    border-left-color: #e5564b;
}

.tf-leaks-row .tf-leak-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.tf-leaks-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.tf-leaks-row-top,
.tf-leaks-row-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tf-leaks-row-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fafafa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-leaks-row-date,
.tf-leaks-row-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: #a1a1aa;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tf-leaks-row-count::after {
    content: '·';
    margin-left: 8px;
    color: #52525b;
}

.tf-leaks-row-count:last-child::after {
    content: none;
}

.tf-leaks-row-sub {
    gap: 8px;
}

.tf-leaks-row-types {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #71717a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tablets and phones (and a breach card without a mailbox card beside it):
   the first three breaches, the rest are one tap away in the details. */
.tf-leaks-row:nth-child(n + 4) {
    display: none;
}

.tf-leaks-preview-more {
    font-size: 12px;
    color: #a1a1aa;
}

.tf-leaks-card .tf-card-actions {
    justify-content: flex-start;
}

/* Breakdown open: it carries its own numbers and the full entries. */
.tf-leaks-card.tf-expanded .tf-leaks-mini,
.tf-leaks-card.tf-expanded .tf-leaks-preview {
    display: none;
}

.tf-leak.tf-leak-flash {
    animation: tf-leak-flash 1.6s ease;
}

@keyframes tf-leak-flash {
    0%,
    40% {
        border-color: #e5564b;
        box-shadow: 0 0 0 3px rgba(207, 54, 45, 0.3);
    }
}

@media (max-width: 520px) {
    .tf-leaks-mini > div {
        padding: 8px 9px;
    }

    .tf-leaks-mini b {
        font-size: 13.5px;
    }

    .tf-leaks-card .tf-card-actions {
        justify-content: stretch;
    }
}