/* Facebook ID finder (/facebook-id-finder/): the form and the result card. Everything else
   (header, cards, prose, FAQ, footer, colours for both themes) comes from facebook-realtime.css. */

.idf-form { margin-top: 4px; }
.idf-form .search-box { margin-top: 0; }
.idf-form .hint a { color: var(--ink-2); text-underline-offset: 3px; }
.idf-msg { min-height: 22px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.idf-msg[data-kind="error"] { color: var(--bad); }
.idf-msg[data-kind="busy"]::after { content: ""; display: inline-block; width: 1.2em; text-align: start; animation: idf-dots 1.2s steps(4, end) infinite; }
@keyframes idf-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .idf-msg[data-kind="busy"]::after { animation: none; content: "..."; } }

.idf-result { margin-top: 8px; }
.idf-who { display: flex; align-items: center; gap: 14px; }
.idf-who img { width: 56px; height: 56px; border: 2px solid var(--surface); border-radius: 50%; background: var(--sunken); box-shadow: 0 0 0 2px var(--fb); object-fit: cover; }
.idf-who img[hidden] { display: none; }
.idf-name { min-width: 0; overflow: hidden; font-size: 20px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.idf-badge { flex: none; height: 22px; padding-inline: 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 22px; }
.idf-badge[hidden] { display: none; }

.idf-ids { display: grid; margin: 16px 0 0; border-top: 1px solid var(--line); }
.idf-ids > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.idf-ids dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.idf-ids dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin: 0; }
.idf-ids code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font: 600 17px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.idf-ids code.is-none { color: var(--muted); font: 400 14px/1.4 var(--font); }
.idf-ids .btn-copy { flex: none; min-width: 104px; }
.idf-ids .btn-copy[hidden] { display: none; }
#idf-followers { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }

.idf-note { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.idf-note[hidden] { display: none; }
.idf-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 719.98px) {
    .idf-ids > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 10px; }
    /* facebook-realtime.css makes copy buttons full width on phones; here they sit next to the id */
    .idf-ids .btn-copy { width: auto; min-width: 0; }
    .idf-links .btn { flex: 1 1 auto; }
}