/* ============================================================
   Раздел «Полезное»: панель поиска, темы, сортировка.
   Цвета — только переменные канона (notes/brandbook.md).
   ============================================================ */

/* display:flex/grid перебивает служебное скрытие через [hidden] —
   без этой строки счётчик показывал 6, а видны были все 41. */
.ui-card[hidden], .ui-grid[hidden], .ui-empty[hidden], .ui-search__x[hidden]{ display:none !important }

.ui-tools{ margin:0 0 clamp(20px,2.4vw,30px); display:grid; gap:14px }
.ui-tools__row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }

.ui-search{ position:relative; flex:1 1 320px; min-width:0 }
.ui-search__i{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--color-text-soft); pointer-events:none }
.ui-search__f{ width:100%; height:50px; padding:0 44px 0 42px; font:400 16px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-text); background:var(--color-surface);
  border:1px solid var(--color-text-soft); border-radius:3px; -webkit-appearance:none; appearance:none }
.ui-search__f::placeholder{ color:var(--color-text-soft) }
.ui-search__f:focus{ outline:2px solid var(--color-accent); outline-offset:-1px; border-color:var(--color-accent) }
.ui-search__f::-webkit-search-cancel-button{ display:none }
.ui-search__x{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:3px; background:transparent;
  color:var(--color-text-soft); font-size:22px; line-height:1; cursor:pointer }
.ui-search__x:hover{ color:var(--color-accent) }

.ui-sort{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto }
.ui-sort>span{ font-size:13px; color:var(--color-text-soft) }
.ui-sort__f{ height:50px; padding:0 12px; font:400 15px/1 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text);
  background:var(--color-surface); border:1px solid var(--color-text-soft); border-radius:3px; cursor:pointer }
.ui-sort__f:focus-visible{ outline:2px solid var(--color-accent); outline-offset:1px }

.ui-chips{ display:flex; flex-wrap:wrap; gap:8px }
.ui-chip{ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px;
  font:400 14px/1 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text); background:var(--color-surface);
  /* Граница интерактивного элемента обязана быть видна: --color-line ночью
     даёт 1,2 к поверхности, и кнопка сливается с фоном. */
  border:1px solid var(--color-text-soft); border-radius:19px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease }
.ui-chip b{ font-weight:700; font-size:12.5px; color:var(--color-text-soft);
  font-variant-numeric:tabular-nums }
.ui-chip:hover{ border-color:var(--color-accent); color:var(--color-accent) }
.ui-chip:hover b{ color:var(--color-accent) }
.ui-chip:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.ui-chip.is-on{ background:var(--color-text); border-color:var(--color-text); color:var(--color-bg) }
.ui-chip.is-on b{ color:var(--color-bg) }
.ui-chip.is-on:hover{ color:var(--color-bg) }
.ui-chip--now{ border-color:var(--color-accent); color:var(--color-accent-ink) }
.ui-chip--now b{ color:var(--color-accent-ink) }
.ui-chip--now.is-on{ background:var(--color-accent-fill); border-color:var(--color-accent);
  color:var(--color-on-fill) }
.ui-chip--now.is-on b{ color:var(--color-on-fill) }
/* .ui-chip.is-on:hover специфичнее и перекрашивал подпись в грунт: 2,17. */
.ui-chip--now.is-on:hover{ color:var(--color-on-fill) }
.ui-chip--now.is-on:hover b{ color:var(--color-on-fill) }

.ui-count{ margin:0; font-size:13.5px; color:var(--color-text-soft) }
.ui-count__n{ font-weight:700; color:var(--color-text); font-variant-numeric:tabular-nums }

/* ---------- сетка ---------- */
.ui-grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px }
.ui-card{ display:flex }
.ui-card__l{ display:flex; gap:14px; width:100%; padding:18px 20px; text-decoration:none;
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:10px;
  transition:border-color .15s ease, transform .15s ease }
.ui-card__l:hover{ border-color:var(--color-accent); transform:translateY(-1px) }
.ui-card__l:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.ui-card__ico{ flex:0 0 38px; width:38px; height:38px; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--color-line); border-radius:3px;
  color:var(--color-accent) }
.ui-card__ico svg{ width:21px; height:21px; display:block }
.ui-card__b{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.ui-card__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ui-card__topic{ font:700 10.5px/1 var(--font-base, "PT Sans", system-ui, sans-serif); letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-soft) }
.ui-card__now{ font:700 10.5px/1 var(--font-base, "PT Sans", system-ui, sans-serif); letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-on-fill); background:var(--color-accent-fill);
  padding:4px 7px; border-radius:2px }
.ui-card__t{ font:700 17px/1.3 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text); text-wrap:pretty }
.ui-card__l:hover .ui-card__t{ color:var(--color-accent-ink) }
.ui-card__d{ font-size:14px; line-height:1.5; color:var(--color-text-mute) }
.ui-card__m{ margin-top:auto; padding-top:8px; font:700 13.5px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-accent-ink) }

.ui-empty{ margin:0; padding:34px 0; text-align:center; font-size:16px; color:var(--color-text-mute) }
.ui-reset{ font:700 16px/1 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-accent-ink); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline }

@media (max-width:640px){
  .ui-grid{ grid-template-columns:1fr }
  .ui-tools__row{ gap:10px }
  .ui-sort{ width:100% }
  .ui-sort__f{ flex:1 }
  .ui-card__l{ padding:15px 16px; gap:12px }
  .ui-card__t{ font-size:16px }
  .ui-chips{ gap:6px }
  .ui-chip{ min-height:34px; padding:0 11px; font-size:13px }
}
@media (prefers-reduced-motion: reduce){
  .ui-card__l{ transition:none }
  .ui-card__l:hover{ transform:none }
}

/* ---------- постраничная навигация ---------- */
/* По 12 плиток: три ряда по четыре на десктопе — ровный блок, который
   виден целиком, без бесконечной прокрутки на 41 карточку. */
.ui-pager{ display:flex; align-items:center; justify-content:center; gap:8px;
  margin:clamp(22px,2.6vw,32px) 0 0; flex-wrap:wrap }
.ui-pager__b,
.ui-pager__p{ min-height:40px; min-width:40px; padding:0 14px;
  font:400 14px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-text); background:var(--color-surface);
  border:1px solid var(--color-text-soft); border-radius:3px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease }
.ui-pager__p{ font-variant-numeric:tabular-nums }
.ui-pager__b:hover:not(:disabled),
.ui-pager__p:hover:not([aria-current="page"]){ border-color:var(--color-accent); color:var(--color-accent) }
.ui-pager__b:focus-visible,
.ui-pager__p:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.ui-pager__b:disabled{ color:var(--color-text-soft); cursor:default; opacity:.55 }
.ui-pager__p[aria-current="page"]{ background:var(--color-text); border-color:var(--color-text);
  color:var(--color-bg); cursor:default }
.ui-pager__pages{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center }
.ui-pager__gap{ align-self:center; padding:0 2px; color:var(--color-text-soft) }
.ui-pager[hidden]{ display:none !important }
@media (max-width:640px){
  .ui-pager__b{ padding:0 10px; font-size:13px }
  .ui-pager__p{ min-width:36px; padding:0 8px }
}

/* Ряд инструментов над списком статей. Отличается от карточек статей
   заливкой и подписью «инструмент»: это не чтение, а действие. */
.ui-inst{ margin:0 0 26px }
.ui-inst__h{ margin:0 0 12px; font:700 18px/1.25 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-text) }
/* Инструментов четыре — столбцы 4 / 2 / 1, чтобы ряд не рвался одиночкой. */
.ui-inst__grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  /* Один рост у всех рядов: иначе на 1024 и 768 верхний ряд выходил
     на 20 px ниже нижнего, и ряд карточек рябил. */
  grid-auto-rows:1fr; gap:12px }
@media (min-width:1120px){ .ui-inst__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) } }
.ui-inst__item{ display:flex }
.ui-inst__l{ display:flex; gap:12px; width:100%; padding:15px 17px; text-decoration:none;
  /* Поверхность, а не --color-plate: плашка в палитре подписана «под on-fill»,
     а здесь текст берётся чернильными токенами. В светлой теме
     --color-plate и --color-text — один и тот же #22262B, и заголовки
     карточек оказались невидимы. Отличие от карточек статей держим
     акцентной рамкой и подписью «инструмент», а не заливкой. */
  background:var(--color-surface); border:1px solid var(--color-accent); border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease }
.ui-inst__l:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.07) }
.ui-inst__l:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.ui-inst__ico{ flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center;
  justify-content:center; color:var(--color-accent-ink) }
.ui-inst__ico svg{ width:20px; height:20px; display:block }
.ui-inst__b{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.ui-inst__k{ font:700 10px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-ink) }
.ui-inst__t{ font:700 16.5px/1.25 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-text); text-wrap:pretty }
.ui-inst__d{ font-size:13.5px; line-height:1.5; color:var(--color-text-mute) }

@media (max-width:640px){
  .ui-inst__grid{ grid-template-columns:1fr }
  .ui-inst{ margin-bottom:20px }
}