/* ═══════════════════════════════════════════
   TalentSheets — Find creators (/find-creators)
   Builds on app.css: the same palette, type and section style.
   ═══════════════════════════════════════════ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Header: balances on the hero band ─────────────────────────────────── */
.find-balance { display: flex; gap: .6rem; flex-wrap: wrap; }
.find-balance__item {
  margin: 0;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  white-space: nowrap;
}
.find-balance__num { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── No plan / out of pages ────────────────────────────────────────────── */
.find-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #fffbeb;
  border-color: #fde68a;
}
.find-banner .app-section__desc { margin: 0; color: #92400e; }
.find-banner[hidden] { display: none; }

/* ── The search form ───────────────────────────────────────────────────── */
.find-form { display: grid; gap: 1rem; }
.find-form__toggles { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

.find-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: .75rem;
  background: #eef1f8;
  gap: 2px;
}
.find-seg button {
  font: 600 .875rem/1 'Space Grotesk', sans-serif;
  color: #4b5563;
  background: transparent;
  border: 0;
  border-radius: .6rem;
  padding: .6rem 1.05rem;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.find-seg button:hover { color: #111827; }
.find-seg button[aria-checked="true"] {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(17,24,39,.12);
}
.find-seg button[hidden] { display: none; }
.find-seg[hidden] { display: none; }
.find-seg--quiet button { font-size: .8rem; padding: .5rem .85rem; }

.find-form__query { display: flex; gap: .6rem; }
.find-form__input { flex: 1; min-width: 0; font-size: 1rem; padding: .75rem 1rem; border-radius: .7rem; }
.find-form__submit { padding: .75rem 1.6rem; }

.find-form__filters { display: flex; gap: .75rem; flex-wrap: wrap; }
.find-form__filters[hidden] { display: none; }

.find-field { display: grid; gap: .3rem; min-width: 9rem; }
.find-field[hidden] { display: none; }
.find-field--wide { min-width: 0; }
.find-field__label { font-size: .75rem; font-weight: 600; color: #6b7280; }

.find-form__note { margin: 0; font-size: .8rem; color: #6b7280; }
.find-form__error {
  margin: 0;
  padding: .65rem .9rem;
  border-radius: .6rem;
  background: #fee2e2;
  color: #991b1b;
  font-size: .85rem;
}
.find-form__error[hidden] { display: none; }
.find-form__error a { color: inherit; font-weight: 700; }

.find-app :focus-visible,
.find-seg button:focus-visible,
.find-try:focus-visible,
.find-card a:focus-visible,
.find-drawer button:focus-visible,
.find-drawer a:focus-visible {
  outline: 2px solid #5a84f0;
  outline-offset: 2px;
}

/* ── Before the first search ───────────────────────────────────────────── */
.find-intro[hidden] { display: none; }
.find-steps { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; color: #374151; font-size: .9rem; max-width: 70ch; }
.find-intro__try { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .85rem; color: #6b7280; }
.find-try {
  font: 600 .8rem 'Space Grotesk', sans-serif;
  color: #3f66d4;
  background: #eef4ff;
  border: 1px solid #dbe5fd;
  border-radius: 999px;
  padding: .35rem .8rem;
  cursor: pointer;
}
.find-try:hover { background: #e0eaff; }

/* ── Results ───────────────────────────────────────────────────────────── */
.find-results[hidden] { display: none; }
.find-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.find-results__head .app-section__title { margin: 0; text-wrap: balance; }
.find-results__count { margin: 0; font-size: .85rem; color: #6b7280; font-variant-numeric: tabular-nums; }

.find-narrow {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: .8rem;
  background: #f8fafd;
  border: 1px solid #eef1f6;
}
.find-narrow .find-field { min-width: 8rem; }
.find-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding-bottom: .45rem; }
.find-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: #374151; cursor: pointer; }
.find-check[hidden] { display: none; }
.find-check input { width: 1rem; height: 1rem; accent-color: #3f66d4; }
.find-check--off { color: #9ca3af; cursor: default; }

.find-status { margin: 0 0 1rem; font-size: .9rem; color: #4b5563; }
.find-status:empty { display: none; }

.find-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1rem;
}

/* A creator card */
.find-card {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1rem;
  border: 1px solid #e8ecf4;
  border-radius: .9rem;
  background: #fff;
  transition: box-shadow .18s, border-color .18s;
  min-width: 0;
}
.find-card:hover { border-color: #d6def0; box-shadow: 0 6px 18px rgba(17,24,39,.07); }
.find-card__top { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.find-card__who { min-width: 0; }
.find-card__name {
  margin: 0;
  display: flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: .95rem; color: #111827;
}
.find-card__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-card__name svg { flex: none; color: #3f66d4; }
.find-card__handle { margin: .1rem 0 0; font-size: .8rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.find-avatar {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: #e8eefc;
  color: #3f66d4;
  font-weight: 700; font-size: .9rem;
}
.find-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.find-avatar--lg { width: 56px; height: 56px; font-size: 1.1rem; }

.find-card__stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.find-card__stats div { min-width: 0; }
.find-card__stats dt { font-size: .7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.find-card__stats dd { margin: .1rem 0 0; font-size: .95rem; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-card__stats dd.find-muted { font-weight: 500; font-size: .8rem; color: #6b7280; white-space: normal; }

.find-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.find-card__tags:empty { display: none; }

.find-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.find-posts li { min-width: 0; }
.find-posts a {
  display: flex; gap: .6rem; align-items: center;
  text-decoration: none; color: inherit;
  padding: .3rem; margin: -.3rem;
  border-radius: .5rem;
  min-width: 0;
}
.find-posts a:hover { background: #f4f6fb; }
.find-post__thumb {
  flex: none;
  width: 40px; height: 52px;
  border-radius: .4rem;
  background: #eef1f6;
  object-fit: cover;
}
.find-post__thumb--wide { width: 64px; height: 36px; }
.find-post__text { min-width: 0; font-size: .78rem; line-height: 1.35; }
.find-post__meta { display: block; color: #111827; font-weight: 600; font-variant-numeric: tabular-nums; }
.find-post__caption { display: block; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.find-card__actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .25rem; }
.find-card__lookup { padding: .5rem 1rem; font-size: .85rem; }
.find-card__lookup small { font-weight: 500; opacity: .85; }
.find-card__link { font-size: .82rem; font-weight: 600; color: #3f66d4; text-decoration: none; }
.find-card__link:hover { text-decoration: underline; }

/* Loading placeholders */
.find-card--ghost { min-height: 230px; background: linear-gradient(90deg, #f4f6fb 25%, #eef1f6 37%, #f4f6fb 63%); background-size: 400% 100%; animation: find-shimmer 1.4s ease infinite; border-color: #eef1f6; }
@keyframes find-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .find-card--ghost { animation: none; } }

.find-more { display: grid; justify-items: center; gap: .5rem; margin-top: 1.25rem; }
.find-more .btn[hidden], .find-more__end[hidden] { display: none; }
.find-more__cost { font-weight: 500; opacity: .8; }
.find-more__end { margin: 0; font-size: .85rem; color: #6b7280; }

/* ── The look-up drawer ────────────────────────────────────────────────── */
.find-drawer { position: fixed; inset: 0; z-index: 1000; }
.find-drawer[hidden] { display: none; }
.find-drawer__backdrop { position: absolute; inset: 0; background: rgba(11,18,32,.45); }
.find-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: -12px 0 40px rgba(17,24,39,.2);
  outline: none;
  font-family: 'Space Grotesk', sans-serif;
}
.find-drawer__head {
  display: flex; gap: .9rem; align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #eef1f6;
}
.find-drawer__who { min-width: 0; flex: 1; }
.find-drawer__kicker { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3f66d4; }
.find-drawer__name { margin: .1rem 0; font-size: 1.2rem; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-drawer__handle { font-size: .85rem; color: #6b7280; text-decoration: none; }
.find-drawer__handle:hover { color: #3f66d4; text-decoration: underline; }
.find-drawer__close {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: .6rem;
  background: #f4f6fb; color: #374151;
  cursor: pointer;
}
.find-drawer__close:hover { background: #e8ecf4; }
.find-drawer__body { flex: 1; overflow-y: auto; padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; }
.find-drawer__status { margin: 0; font-size: .9rem; color: #374151; }
.find-drawer__status:empty { display: none; }
.find-drawer__status--error { padding: .7rem .9rem; border-radius: .6rem; background: #fee2e2; color: #991b1b; }
.find-drawer__status--error a { color: inherit; font-weight: 700; }

.find-figures-wrap { display: grid; gap: 1.1rem; }
.find-figures-wrap[hidden] { display: none; }
.find-fee { padding: 1rem 1.1rem; border-radius: .8rem; background: #f4f7ff; border: 1px solid #dfe7fd; }
.find-fee__label { margin: 0; font-size: .75rem; font-weight: 600; color: #3f66d4; }
.find-fee__range { margin: .2rem 0 0; font-size: 1.5rem; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.find-fee__typical { margin: .15rem 0 0; font-size: .82rem; color: #4b5563; }

.find-figures { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.25rem; }
.find-figures div { padding: .6rem 0; border-bottom: 1px solid #f0f2f7; min-width: 0; }
.find-figures dt { font-size: .75rem; color: #6b7280; }
.find-figures dd { margin: .15rem 0 0; font-size: 1rem; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }

.find-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.find-facts:empty { display: none; }
.find-facts li { padding: .55rem .8rem; border-radius: .6rem; font-size: .85rem; background: #f4f6fb; color: #374151; }
.find-facts li.find-fact--warn { background: #fef3c7; color: #92400e; font-weight: 600; }

.find-drawer__source { margin: 0; font-size: .8rem; color: #6b7280; }

.find-add { display: grid; gap: .8rem; padding-top: 1.25rem; border-top: 1px solid #eef1f6; }
.find-add[hidden] { display: none; }
.find-add__title { margin: 0; font-size: 1rem; font-weight: 700; color: #111827; }
.find-add .app-input { width: 100%; }
.find-add__status { margin: 0; font-size: .85rem; color: #374151; }
.find-add__status:empty { display: none; }
.find-add__status--ok { color: #15803d; font-weight: 600; }
.find-add__status--error { color: #b91c1c; }
.find-add__status a { color: #3f66d4; font-weight: 700; }

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .find-form__query { flex-direction: column; }
  .find-form__submit { width: 100%; }
  .find-seg { width: 100%; }
  .find-seg button { flex: 1; padding-inline: .5rem; }
  .find-narrow .find-field, .find-form__filters .find-field { min-width: 0; flex: 1 1 45%; }
  .find-grid { grid-template-columns: 1fr; }
  .find-figures { grid-template-columns: 1fr; }
  .find-drawer__body { padding: 1.25rem 1rem; }
  .find-drawer__head { padding: 1rem; }
}

/* ── Platforms as on/off chips (search one, two or all three) ──────────── */
.find-chips { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.find-chips button {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .875rem/1 'Space Grotesk', sans-serif;
  color: #4b5563;
  background: #fff;
  border: 1.5px solid #dfe3ec;
  border-radius: 999px;
  padding: .55rem .95rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.find-chips button::before {
  content: ''; width: .8rem; height: .8rem; border-radius: 50%;
  border: 1.5px solid #c4cad6; background: #fff; flex: none;
}
.find-chips button[aria-pressed="true"] { background: #eef4ff; border-color: #9db5f5; color: #1e3a8a; }
.find-chips button[aria-pressed="true"]::before {
  border-color: #3f66d4;
  background: #3f66d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.find-chips button:disabled { opacity: .45; cursor: not-allowed; }
.find-chips button:focus-visible { outline: 2px solid #5a84f0; outline-offset: 2px; }
.find-seg button:disabled { opacity: .45; cursor: not-allowed; }

/* ── Selecting creators ────────────────────────────────────────────────── */
.find-results__side { display: flex; align-items: center; gap: .5rem 1.1rem; flex-wrap: wrap; }
.find-card { position: relative; }
.find-card__select {
  position: absolute; top: .75rem; right: .75rem;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  cursor: pointer;
}
.find-card__select input { width: 1.1rem; height: 1.1rem; accent-color: #3f66d4; cursor: pointer; }
.find-card__top { padding-right: 1.75rem; }
.find-card--selected { border-color: #9db5f5; box-shadow: 0 0 0 2px #dbe5fd; }
.find-card__platform-tag { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3f66d4; }

/* ── Your picks: a panel in the results, beside the cards ─────────────── */
.find-results__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 1.25rem;
  align-items: start;
  margin-top: .25rem;
}
.find-results__main { min-width: 0; }

.find-picks {
  position: sticky; top: 1rem;
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1rem;
  border: 1px solid #e8ecf4;
  border-radius: .9rem;
  background: #f8f9fb;
}

.find-picks__head { display: flex; align-items: center; gap: .5rem; }
.find-picks__title { margin: 0; font-size: 1rem; font-weight: 700; color: #111827; }
.find-picks__count {
  margin-left: auto; min-width: 1.6rem; padding: .15rem .5rem; border-radius: 999px;
  background: #e5e7eb; font-size: .78rem; font-weight: 700; text-align: center; color: #4b5563;
  font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s;
}
.find-picks.has-picks .find-picks__count { background: #5a84f0; color: #fff; }

/* The list, drawn as a few rows of a sheet */
.find-picks__sheet { overflow: hidden; border: 1px solid #dadce0; border-radius: .5rem; background: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.find-picks__hdr, .find-picks__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 70px 26px; align-items: center; }
.find-picks__hdr span { padding: .35rem .45rem; font-size: 11px; font-weight: 700; color: #fff; }
.find-picks__hdr span:nth-child(1) { align-self: stretch; display: grid; place-items: center; padding: 0; background: #f8f9fa; border-right: 1px solid #e1e3e1; font-size: 10.5px; font-weight: 400; color: #5f6368; }
.find-picks__hdr span:nth-child(2) { background: #ff9900; }
.find-picks__hdr span:nth-child(3) { grid-column: span 2; background: #f1c232; }
.find-picks__list { margin: 0; padding: 0; list-style: none; max-height: 290px; overflow-y: auto; counter-reset: pick 1; }
.find-picks__list li { border-top: 1px solid #e1e3e1; font-size: 12.5px; color: #202124; animation: pick-in .25s ease; }
.find-picks__list li::before { counter-increment: pick; content: counter(pick); align-self: stretch; display: grid; place-items: center; background: #f8f9fa; border-right: 1px solid #e1e3e1; font-size: 10.5px; color: #5f6368; }
.find-picks__who { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .4rem .45rem; }
.find-picks__who .find-avatar { width: 24px; height: 24px; font-size: .6rem; }
.find-picks__who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-picks__platform { padding: 0 .45rem; font-size: 11.5px; color: #5f6368; }
.find-picks__remove {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: none; font-size: 15px; line-height: 1; color: #9aa0a6; cursor: pointer;
}
.find-picks__remove:hover { background: #fce8e6; color: #c5221f; }
.find-picks__remove:focus-visible { outline: 2px solid #5a84f0; outline-offset: 1px; }
.find-picks__empty { margin: 0; padding: .9rem .8rem; border-top: 1px solid #e1e3e1; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; line-height: 1.5; color: #6b7280; }
.find-picks.has-picks .find-picks__empty { display: none; }
@keyframes pick-in { from { background: #e6f4ea; } to { background: #fff; } }

.find-picks__status { margin: 0; padding: .65rem .75rem; border-radius: .5rem; background: #e6f4ea; font-size: .84rem; line-height: 1.5; color: #0f5132; }
.find-picks__status:empty { display: none; }
.find-picks__status a { color: #137333; font-weight: 700; }

.find-picks__form { display: flex; flex-direction: column; gap: .55rem; }
.find-picks:not(.has-picks) .find-picks__form { display: none; }
.find-picks__label { margin: .1rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; }
.find-picks__mode { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: #e9ecf2; }
.find-picks__mode button {
  padding: .45rem .5rem; border: 0; border-radius: 999px; background: none;
  font: 600 .8rem 'Space Grotesk', sans-serif; color: #4b5563; white-space: nowrap; cursor: pointer;
}
.find-picks__mode button[aria-checked="true"] { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(17, 24, 39, .14); }
.find-picks__mode button:disabled { opacity: .45; cursor: not-allowed; }
.find-picks__mode button:focus-visible { outline: 2px solid #5a84f0; outline-offset: 1px; }
.find-picks__form .app-input { width: 100%; background-color: #fff; }
.find-picks__cost { margin: 0; font-size: .76rem; line-height: 1.45; color: #6b7280; }
.find-picks__add { width: 100%; padding: .65rem 1rem; font-size: .9rem; }
.find-picks__clear { align-self: center; background: none; border: 0; padding: .25rem .5rem; font: 600 .8rem 'Space Grotesk', sans-serif; color: #6b7280; cursor: pointer; }
.find-picks__clear:hover { color: #111827; }
.find-picks__clear:focus-visible { outline: 2px solid #5a84f0; outline-offset: 2px; }

/* Narrower screens: the panel sits above the cards */
@media (max-width: 1100px) {
  .find-results__body { grid-template-columns: 1fr; }
  .find-picks { position: static; order: -1; }
  .find-picks__list { max-height: 200px; }
}