/* Instagram user ID finder (livecounts.nl/instagram-user-id-finder/). Loaded after instagram-live.css. */

.idf { max-width: 860px; }
.idf-card { position: relative; padding: 22px 28px 24px; }
.idf-card[data-state="idle"] .idf-result, .idf-card[data-state="loading"] .idf-result, .idf-card[data-state="error"] .idf-result { display: none; }
.idf-card:not([data-state="idle"]) .idf-idle { display: none; }
.idf-idle { margin: 0; color: var(--muted); font-size: 15px; }
.idf-msg { margin: 0; color: var(--ink-2); font-size: 15px; }
.idf-msg:empty { display: none; }
.idf-card[data-state="loading"] .idf-msg { color: var(--muted); }
.idf-card[data-state="found"] .idf-msg { display: none; }

.idf-who { display: flex; align-items: center; gap: 14px; }
.idf-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--sunken); object-fit: cover; }
.idf-who .who-name { font-size: 17px; }
.idf-who .idf-user { color: var(--muted); font-size: 13.5px; }

.idf-idbox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.idf-idlabel { width: 100%; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.idf-id { flex: 1; min-width: 0; font: 700 clamp(26px, 5.5vw, 40px)/1.1 var(--mono); letter-spacing: .01em; overflow-wrap: anywhere; user-select: all; }
.idf-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; }
.idf-rows dt { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.idf-rows dd { margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }
.idf-rows a { color: var(--ink); text-underline-offset: 3px; }
/* the line between the result and the first ad */
.idf-note { margin: 14px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 719.98px) {
    .idf-card { padding: 18px 16px 20px; }
    .idf-rows { grid-template-columns: minmax(0, 1fr); }
}