/* ============================================================================
   cases.css — указатель судебных решений.

   Токены берутся из assets/styles.css, типографика колонки — из
   notes.css. Здесь только карточка дела и строка поиска.

   Решение оформления: это СПИСОК, который листают, а не текст, который
   читают подряд. Поэтому карточки плотные, имя дела крупнее пересказа, а
   суд и год — моноширинной строкой: по ним ищут глазами, и цифры должны
   стоять столбиком.
   ========================================================================== */

.cs-find { margin: 6px 0 14px; }
.cs-find input {
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1.4 var(--f-t);
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--fg);
  -webkit-appearance: none;
}
.cs-find input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.cs-count {
  font: 400 11px/1 var(--f-m);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 9px 0 0;
}

.cs-group { margin: 0 0 10px; }
.cs-group h2 {
  font-family: var(--f-d);
  font-size: 19px;
  letter-spacing: .2px;
  margin: 30px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-2);
}

.cs-item {
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--line-3);
}
.cs-item h3 {
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 3px;
  text-wrap: balance;
}
.cs-item h3 a { color: var(--fg); text-decoration: none; }
.cs-item h3 a:hover { color: var(--link); text-decoration: underline; }

.cs-meta {
  font: 400 12.5px/1.45 var(--f-m);
  letter-spacing: .03em;
  color: var(--fg-3);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.cs-shows {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--fg-2);
  margin: 0 0 8px;
  max-width: 64ch;
}

/* Дословная цитата из решения. Она есть не у всех дел, и это честно:
   там, где мы её не выписали, выдумывать её нельзя. */
.cs-quote {
  margin: 0 0 8px;
  padding: 2px 0 2px 13px;
  border-left: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  font-style: italic;
  max-width: 62ch;
}

.cs-where {
  font: 400 12.5px/1.5 var(--f-m);
  color: var(--fg-3);
  margin: 0;
}
.cs-where a { color: var(--link); }

.cs-none {
  padding: 22px 0;
  color: var(--fg-2);
  font-size: 15.5px;
}

.cs-after { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2); }
.cs-after h2 {
  font-family: var(--f-d);
  font-size: 19px;
  margin: 0 0 12px;
}
.cs-after p { font-size: 15.5px; line-height: 1.62; color: var(--fg-2); margin: 0 0 14px; max-width: 64ch; }

@media (max-width: 520px) {
  .cs-item h3 { font-size: 16px; }
  .cs-shows, .cs-quote { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Якорь на конкретное дело. Это справочная страница: коллеге присылают
   решение, а не «там поищи». Решётка бледная и проявляется по наведению —
   на телефоне она всё равно доступна как ссылка. */
.cs-anchor {
  color: var(--fg-3);
  text-decoration: none;
  opacity: .35;
  padding: 0 3px;
}
.cs-item:hover .cs-anchor { opacity: 1; }
.cs-anchor:focus-visible { opacity: 1; outline: 2px solid var(--accent); }
/* Открытое по якорю дело должно быть видно под липкой шапкой. */
.cs-item:target { scroll-margin-top: 72px; }