/* gitbar — инструмент поиска по личной базе ссылок.
   Ориентиры: GitHub, Linear, Raycast, Warp, Obsidian, Vercel.
   95% нейтральный серый, 5% зелёный: активный фильтр, hover, статус Production, логотип.
   Строка списка — табличная: правые колонки выровнены, чтобы глаз сканировал по одной оси. */

:root {
  --bg:       #0c0d10;
  --panel:    #101216;
  --row:      #0f1114;
  --row-hi:   #16191f;
  --border:   #1e222a;
  --border-hi:#2b313b;
  --fg:       #e6e8ec;
  --muted:    #8b929e;
  --faint:    #616974;
  --accent:   #3fb950;
  --accent-hi:#56d364;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --head-h: 60px;
  --row-h:  56px;
  --gap:    4px;
  --side:   96px;   /* правая колонка строки: звёзды и статус выровнены по вертикали */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ========================= HEADER (sticky, одна строка) ========================= */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--head-h);
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }

.brand .logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  display: block;
}
.brand .nm { font: 600 15px/1 var(--mono); letter-spacing: -0.3px; }
.brand .nm b { color: var(--accent); font-weight: 600; }
.brand .cr {
  font: 400 10px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: lowercase;
  margin-top: 3px;
}
.brand .txt { display: flex; flex-direction: column; gap: 3px; }

/* --- поиск: самый крупный элемент, заметнее логотипа --- */

.find { position: relative; flex: 1 1 auto; min-width: 200px; max-width: 560px; }

.find input {
  width: 100%;
  height: 36px;
  padding: 0 76px 0 32px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  color: var(--fg);
  font: 400 14px/1 var(--sans);
  outline: none;
}
.find input::placeholder { color: var(--faint); }
.find input:focus { border-color: var(--accent); }
.find input::-webkit-search-cancel-button { display: none; }

.find .ic {
  position: absolute; left: 11px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
  pointer-events: none;
}
.find .ic::after {
  content: ""; position: absolute; right: -4px; bottom: -4px;
  width: 5px; height: 1.5px; background: var(--faint);
  transform: rotate(45deg);
}
.find input:focus ~ .ic, .find input:focus ~ .ic::after { border-color: var(--muted); background-color: var(--muted); }
.find input:focus ~ .ic { background: none; }

.find .hint {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font: 400 10px/1 var(--mono);
  color: var(--faint);
  pointer-events: none;
}
.find .hint span {
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  padding: 3px 4px;
}
.find input:not(:placeholder-shown) ~ .hint { display: none; }

/* --- фильтры-категории: скрывают записи, не меняют страницу --- */

.filters { display: flex; align-items: center; gap: 3px; flex: none; }

.filters button {
  display: flex; align-items: center; gap: 5px;
  height: 28px;
  padding: 0 9px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.filters button:hover { color: var(--fg); background: var(--row-hi); }
.filters button i {
  font: 500 10px/1 var(--mono);
  font-style: normal;
  color: var(--faint);
}
.filters button.on {
  color: var(--accent);
  background: rgba(63, 185, 80, 0.09);
  border-color: rgba(63, 185, 80, 0.32);
}
.filters button.on i { color: var(--accent); opacity: 0.75; }

.tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.tools select {
  height: 28px;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font: 400 12px/1 var(--sans);
  outline: none;
  cursor: pointer;
}
.tools .total { font: 400 11px/1 var(--mono); color: var(--faint); white-space: nowrap; }

/* ========================= СПИСОК ========================= */

main { max-width: 1180px; margin: 0 auto; padding: 8px 16px 48px; }

.list { display: flex; flex-direction: column; gap: var(--gap); }

/* строка: две текстовые строки + фиксированная правая колонка */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  align-content: center;
  gap: 3px 12px;
  height: var(--row-h);
  padding: 0 12px;
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.row:hover, .row.sel { background: var(--row-hi); border-color: var(--border-hi); }
.row.sel { border-color: rgba(63, 185, 80, 0.45); }
.row:hover .nm, .row.sel .nm { color: var(--accent); }

.row .l1, .row .l2 { display: flex; align-items: center; gap: 7px; min-width: 0; }

/* точка личного статуса — единственный маркер слева, читается за один проход */
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: none;
  background: var(--border-hi);
}
.dot.prod   { background: var(--accent); }
.dot.tested { background: #7d8590; }
.dot.wish   { background: #4a5058; box-shadow: inset 0 0 0 1px #6a727c; }

.row .nm {
  flex: 0 1 auto;
  min-width: 0;
  font: 600 13.5px/1.2 var(--sans);
  letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm mark { background: rgba(63, 185, 80, 0.22); color: inherit; border-radius: 2px; }

.ds {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 12.5px/1.2 var(--sans);
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds mark { background: rgba(63, 185, 80, 0.16); color: var(--fg); border-radius: 2px; }

/* категория показывается только когда список смешанный */
.cat {
  flex: none;
  font: 500 9.5px/14px var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  text-transform: uppercase;
}

.tags { display: flex; gap: 4px; flex: none; }
.tag {
  font: 400 10.5px/15px var(--mono);
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
}
.tag:hover { color: var(--accent); border-color: rgba(63, 185, 80, 0.4); }

/* правая колонка: звёзды сверху, статус снизу — обе выровнены по всем строкам */
.meta {
  justify-self: end;
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.st {
  justify-self: end;
  font: 500 9.5px/14px var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
}
.st.prod { color: var(--accent); }

/* ========================= СЛУЖЕБНОЕ ========================= */

.empty { padding: 48px 4px; color: var(--faint); font-size: 13px; }
.empty b { color: var(--muted); font-weight: 500; }

.foot {
  margin-top: 20px; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; gap: 12px;
  font: 400 11px/1 var(--mono); color: var(--faint);
}

/* ========================= MOBILE ========================= */
/* Одна колонка сохраняется, структура строки та же. Меняется только раскладка шапки. */

@media (max-width: 1200px) {
  .brand .cr { display: none; }
  .tools .total { display: none; }
}

@media (max-width: 900px) {
  /* Шапка в две строки, не в три: каждая лишняя строка шапки — минус ссылка на экране.
     Строка 1 — логотип + поиск, строка 2 — фильтры + сортировка. */
  .bar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    row-gap: 8px;
  }
  .brand { order: 1; gap: 7px; }
  .brand .logo { width: 44px; height: 44px; }
  .brand .nm { font-size: 14px; }
  /* flex-basis: 0 — иначе собственная ширина инпута (padding под иконку и подсказку)
     не даёт ему встать в один ряд с логотипом и он переносится на свою строку */
  .find { order: 2; flex: 1 1 0; min-width: 120px; max-width: none; }
  .find input { height: 44px; padding-right: 12px; }
  .find .hint { display: none; }
  .tools { order: 3; flex: none; margin-left: 0; }
  /* фильтры — отдельной строкой во всю ширину: сжатые до нечитаемости пилюли бесполезны */
  .filters {
    order: 4;
    flex: 0 0 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .filters::-webkit-scrollbar { display: none; }

  main { padding: 8px 12px 40px; }
  .row { --side: 74px; padding: 0 10px; }
}

/* На узком экране текстовый вордмарк уступает место поиску: 95% сценария — печатать,
   а идентичность держит сам логотип-бирдекль. */
@media (max-width: 480px) {
  .brand .txt { display: none; }
  .row .nm { font-size: 13px; }
  .row .ds { font-size: 12px; }
  /* теги на мобиле уступают место описанию — фильтрация идёт через поиск и пилюли */
  .row .l2 .tags { display: none; }
}

/* вход на отдельную страницу OSINT — вес как у соседних кнопок шапки, не крупнее */
.tools .osint-in {
  height: 26px;
  display: flex; align-items: center;
  padding: 0 9px;
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.02em;
}
.tools .osint-in:hover { color: var(--accent); border-color: var(--accent); }