/* v31: убраны правила .lm-r-c, .lm-b-c и .lm-tag-n — сами элементы
   больше не создаются, счёт упоминаний не показывается. */
/* mentions-v24.css — раздел «Летов о музыке».
   Палитра и радиусы из styles.css, чтобы раздел выглядел частью каталога.
   Цитаты — читаемая типографика: это единственное место на сайте,
   где текст важнее плитки. */

/* ---------- кнопка режима ---------- */
.modes button.lm-btn{position:relative}

/* ---------- шапка списка ---------- */
.lm-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.lm-count{font-size:1.0625rem;letter-spacing:-.01em}
.lm-count b{
  font-size:1.5rem;font-weight:800;margin-right:4px;
  background:linear-gradient(135deg,#ff00e5,#00f0ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lm-of{opacity:.55;font-size:.9375rem}
.lm-sort select{
  font:inherit;font-size:.875rem;padding:8px 12px;min-height:40px;
  border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:inherit;cursor:pointer;
}
.lm-sort select:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}
.lm-sort option{background:#191c21;color:#f3f0e9}

.lm-expl{
  font-size:.9375rem;line-height:1.6;opacity:.78;
  margin:0 0 18px;padding:12px 16px;
  border-left:3px solid rgba(0,240,255,.5);
  background:rgba(0,240,255,.05);border-radius:0 8px 8px 0;
}

/* ---------- список записей ---------- */
.lm-list{display:flex;flex-direction:column;gap:2px}
/* v31: столбцов стало три. Четвёртый занимал счёт упоминаний, который
   убран — важно ГДЕ упомянуто, а не сколько раз. Без этой правки
   осталась бы пустая колонка справа. */
.lm-row{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:12px;width:100%;
  font:inherit;text-align:left;color:inherit;cursor:pointer;
  padding:12px 14px;min-height:52px;
  border-radius:10px;border:1px solid transparent;
  background:rgba(255,255,255,.03);
  transition:.14s;
}
.lm-row:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.lm-row:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}
.lm-row.has{border-left:3px solid #ff00e5}
.lm-r-n{font-weight:700;font-size:.9688rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-r-m{font-size:.75rem;opacity:.55;white-space:nowrap}
.lm-r-s{font-size:.75rem;opacity:.7;white-space:nowrap}
.lm-row.has .lm-r-s{color:#ff9ceb;opacity:.9}
.lm-loadmore{
  display:block;width:100%;margin:18px 0 0;
  font:inherit;font-size:.9375rem;font-weight:700;
  padding:14px;min-height:48px;border-radius:12px;cursor:pointer;color:inherit;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  transition:.16s;
}
.lm-loadmore:hover{background:rgba(255,255,255,.13)}
.lm-loadmore:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}

.lm-none{
  padding:34px 26px;text-align:center;
  border:1px dashed rgba(255,255,255,.22);border-radius:14px;
  background:rgba(255,255,255,.03);
}
.lm-none b{display:block;font-size:1.125rem;margin-bottom:7px}
.lm-none p{opacity:.72;font-size:.9375rem}

/* ---------- карточка записи ---------- */
.lm-detail{max-width:56rem}
.lm-back{
  font:inherit;font-size:.875rem;font-weight:600;
  padding:8px 14px;min-height:38px;margin:0 0 18px;
  border-radius:9px;cursor:pointer;color:inherit;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
}
.lm-back:hover{background:rgba(255,255,255,.12)}
.lm-back:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}

.lm-d-head{margin:0 0 16px}
.lm-d-name{
  font-size:clamp(1.5rem,4vw,2.125rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.15;margin:0 0 10px;
}
.lm-d-meta{display:flex;flex-wrap:wrap;gap:7px}
.lm-tag{
  font-size:.75rem;padding:5px 12px;border-radius:20px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
}
.lm-bio{
  font-size:1rem;line-height:1.68;opacity:.9;
  margin:16px 0 4px;max-width:44rem;
}
.lm-biosrc{font-size:.75rem;opacity:.6;color:#7fd4ff}
.lm-biosrc:hover{opacity:1}

.lm-genres{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.lm-g{
  font-size:.6875rem;padding:4px 10px;border-radius:20px;
  background:rgba(123,47,247,.16);border:1px solid rgba(123,47,247,.4);
}

.lm-h3{
  font-size:.8125rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.6;margin:28px 0 12px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);
}

.lm-svc{display:flex;flex-wrap:wrap;gap:8px}
.lm-svc-a{
  display:inline-block;padding:9px 15px;min-height:40px;
  border-radius:9px;text-decoration:none;color:inherit;
  font-size:.875rem;font-weight:600;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-left-width:3px;
  transition:.14s;
}
.lm-svc-a:hover{background:rgba(255,255,255,.14)}
.lm-svc-a:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}

.lm-off{
  padding:20px 22px;border-radius:12px;
  background:rgba(255,251,0,.05);
  border:1px solid rgba(255,251,0,.28);
  border-left:4px solid #fffb00;
}
.lm-off b{display:block;font-size:1rem;margin-bottom:6px}
.lm-off p{font-size:.9375rem;opacity:.8;line-height:1.6}

.lm-note{font-size:.8125rem;opacity:.6;margin:12px 0 0}

/* ---------- цитаты ---------- */
.lm-quotes{display:flex;flex-direction:column;gap:14px}
.lm-q{
  margin:0;padding:16px 20px;
  border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.04);
  border-left:3px solid rgba(255,0,229,.55);
}
.lm-q-t{
  font-size:1rem;line-height:1.72;
  white-space:pre-wrap;         /* в цитатах есть переносы строк */
  max-width:42rem;
}
.lm-cite{
  display:block;margin-top:12px;
  font-size:.75rem;font-style:normal;
  letter-spacing:.04em;opacity:.55;
}
.lm-cite:before{content:'— '}
.lm-srcnote{font-size:.75rem;opacity:.55;line-height:1.55;margin:14px 0 0}
.lm-srcnote a{color:#7fd4ff}

.lm-books{list-style:none;margin:0;padding:0}
.lm-books li{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.9375rem;
}
.lm-books li:last-child{border-bottom:0}
/* ---------- боковая панель ---------- */
.lm-hint{font-size:.75rem;line-height:1.5;opacity:.6;padding:0 2px 12px}
.lm-search{
  width:100%;font:inherit;font-size:.875rem;
  padding:10px 13px;min-height:42px;margin:0 0 12px;
  border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:inherit;
}
.lm-search:focus-visible{outline:2px solid #00f0ff;outline-offset:1px}
.lm-search::placeholder{opacity:.5}

.lm-navitem{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  width:100%;font:inherit;font-size:.875rem;
  padding:10px 12px;min-height:42px;margin-bottom:4px;
  border-radius:10px;cursor:pointer;text-align:left;color:inherit;
  background:transparent;border:1px solid transparent;
  transition:.14s;
}
.lm-navitem:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.lm-navitem:focus-visible{outline:2px solid #00f0ff;outline-offset:1px}
.lm-navitem.on{
  background:linear-gradient(135deg,rgba(255,0,229,.3),rgba(123,47,247,.3));
  border-color:#ff00e5;font-weight:700;
}
.lm-navitem.sm{font-size:.8125rem;min-height:38px;padding:8px 12px}
.lm-ni-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-ni-c{opacity:.5;font-size:.75rem;flex:none;font-variant-numeric:tabular-nums}
.lm-navitem.on .lm-ni-c{opacity:.85}

.lm-sec{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.lm-sec-h{
  font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  opacity:.5;padding:0 2px 8px;
}

/* плашка «Летов упоминал» на карточке — теперь кликабельна */
.mtag{cursor:pointer;transition:.14s}
.mtag:hover{color:#ff9ceb;text-decoration:underline}

@media(max-width:820px){
  /* v31: счёт убран, поэтому второй столбец больше не нужен —
     иначе строка растянулась бы на пустое место. */
  .lm-row{grid-template-columns:1fr;row-gap:4px}
  .lm-r-m{grid-column:1;font-size:.6875rem}
  .lm-r-s{grid-column:1;grid-row:2}
  .lm-head{gap:10px}
  .lm-sort{flex:1 1 100%}
  .lm-sort select{width:100%}
  .lm-hint{display:none}
  .lm-q{padding:14px 16px}
  .lm-q-t{font-size:.9375rem}
}

@media(prefers-reduced-motion:reduce){
  .lm-row,.lm-navitem,.lm-svc-a,.lm-more,.lm-loadmore{transition:none}
}