/* ==========================================================================
   ZNAJDZ W APCE — okno i reflektor (od 10.10.2026, find.js)
   Okno = wzor statystyk (.sx-ovl / .sx-modal / .sx-hd / .sx-x w styles.css,
   lista kontrolna w notatki/kolory.md). Tu tylko to, co wlasne: pole
   szukania, sekcje, wiersze, reflektor. Klasy z przedrostkiem „fnd-”.
   ========================================================================== */

.fnd-ovl { display: none; z-index: 5750; }
.fnd-ovl.on { display: flex; }
.fnd-modal { max-width: 620px; max-height: min(720px, 88vh); }
.fnd-hd { padding-bottom: 14px; }

/* --- pole szukania --- */
.fnd-q {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 6px 0 14px; border-radius: 12px;
  border: 1px solid #23262d; background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s;
}
/* fokus: kreska od srodka pod polem — motion.css E3 (animacje etap 2, 18.10.2026; dawna ramka zdjeta) */
.fnd-q > i { color: var(--accent); font-size: var(--fs-body); }
.fnd-q input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0; color: #fff;
  font: inherit; font-size: 16px; /* 16 px: iPhone nie przybliza strony przy fokusie */
}
.fnd-q input::-webkit-search-cancel-button { display: none; }
.fnd-q input::placeholder { color: var(--txt-dim); }
.fnd-clr {
  display: none; width: 32px; height: 32px; border-radius: 8px;
  background: none; border: 0; color: var(--txt-dim); cursor: pointer;
}
.fnd-q.has-q .fnd-clr { display: grid; place-items: center; }
.fnd-clr:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* --- lista --- */
.fnd-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 2px;
}
.fnd-sub {
  font-size: var(--fs-tag); letter-spacing: 2px; font-weight: 700;
  color: var(--txt-dim); margin: 14px 2px 8px;
}
.fnd-grps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fnd-grp {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid #1d2026; background: rgba(255, 255, 255, 0.025);
  color: #fff; font: inherit; transition: border-color 0.2s, background 0.2s;
}
.fnd-grp:hover, .fnd-grp:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); outline: 0;
}
.fnd-grp i { color: var(--accent); font-size: var(--fs-lead); width: 20px; text-align: center; flex: 0 0 auto; }
.fnd-grp span {
  font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1px;
  min-width: 0; overflow-wrap: anywhere;
}
.fnd-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px;
}
.fnd-row:hover { background: rgba(255, 255, 255, 0.04); }
.fnd-row > i { color: var(--accent); font-size: var(--fs-lead); text-align: center; }
.fnd-rt { min-width: 0; }
.fnd-rt b { display: block; font-size: var(--fs-body); font-weight: 600; color: #fff; }
.fnd-rt em {
  display: block; font-style: normal; font-size: var(--fs-small);
  color: var(--txt-dim); margin-top: 2px; overflow-wrap: anywhere;
}
.fnd-go {
  font: inherit; font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: background 0.2s;
}
.fnd-go:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.fnd-back {
  align-self: flex-start; margin: 10px 2px 6px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-small); color: var(--accent);
}
.fnd-back i { margin-right: 6px; }
.fnd-none { padding: 22px 10px; text-align: center; color: var(--txt-dim); font-size: var(--fs-small); }

/* --- reflektor: reszta ekranu przygaszona, miejsce obrysowane akcentem --- */
.fnd-spot {
  position: fixed; z-index: 9400; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(2, 3, 4, 0.78), 0 0 0 2px var(--accent), 0 0 26px var(--accent);
  transition: left 0.12s, top 0.12s, width 0.12s, height 0.12s;
}
.fnd-blk { position: fixed; z-index: 9401; background: transparent; }
.fnd-blk.fnd-dim { background: rgba(2, 3, 4, 0.78); }
.fnd-tip {
  position: fixed; z-index: 9402; padding: 11px 14px; border-radius: 12px;
  font-size: var(--fs-small); line-height: 1.45; color: #fff;
  background: #08090c; border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px color-mix(in srgb, var(--accent) 20%, transparent);
}
.fnd-tip b { color: var(--accent); }
.fnd-tip span { display: block; color: #c9d0d6; margin-top: 2px; }
/* krok pokazu (12.10.2026): „KROK 1/2” nad poleceniem, bez przycisku — stukniecie = dalej */
.fnd-stepn {
  display: block; margin-bottom: 2px; font-style: normal; font-size: var(--fs-tag);
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim);
}
.fnd-tip button {
  display: block; margin: 8px 0 0 auto; padding: 5px 12px; border-radius: 7px;
  font: inherit; font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1px; cursor: pointer;
  border: 1px solid var(--accent); color: var(--accent); background: none;
}
/* krok czeka na stukniecie (12.10.2026): × w rogu przerywa pokaz; miejsce na niego z prawej */
.fnd-tip-step { padding-right: 40px; cursor: pointer; }
.fnd-tip .fnd-stop {
  position: absolute; top: 3px; right: 3px; margin: 0; padding: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; border-radius: 9px; font-size: var(--fs-body); color: var(--txt-dim);
}
.fnd-tip .fnd-stop:hover { color: #fff; }

/* --- telefon: plywajaca karta od dolu (zaslona i ksztalt z .sx-ovl) --- */
@media (max-width: 768px) {
  .fnd-modal { max-height: 86vh; }
  .fnd-list { padding: 4px 12px calc(16px + env(safe-area-inset-bottom)); }
  .fnd-grps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnd-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; }
  .fnd-go { padding: 8px 11px; }
}