/* ============================================================
   rules.css — текст правила под ответом и экран со сводом.
   ============================================================ */

/* -------------------------------------------------- правило под разбором */

/* Отдельная рамка, а не продолжение разбора. Разбор — наш пересказ,
   а здесь дословная цитата закона, и человек должен видеть, где кончается
   одно и начинается другое: на экзамене спросят по букве. */
.rule-ref {
  margin-top: 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--amber);
  overflow: hidden;
}
.rule-ref__head, .rule-ref > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--amber-soft);
}
.rule-ref > summary { cursor: pointer; list-style: none; }
.rule-ref > summary::-webkit-details-marker { display: none; }
/* Стрелка сама, а не браузерная: у маркера details нет управления цветом,
   и на тёмном фоне он тонет. */
.rule-ref > summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--t-fast) var(--ease);
}
.rule-ref[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.rule-ref__head svg, .rule-ref > summary svg { flex: none; }

.rule-ref__body { padding: 0 14px 12px; }
.rule-ref__body p {
  margin: 0 0 9px; color: var(--text-2); font-size: 14.5px; line-height: 1.62;
}
.rule-ref__body p:last-of-type { margin-bottom: 0; }
.rule-ref__body strong { color: var(--text); }

.rule-ref__more {
  display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--cyan);
}

/* Знак: картинка слева, пояснение справа; на телефоне — друг под другом. */
.rule-ref__sign { display: flex; gap: 14px; align-items: flex-start; }
.rule-ref__sign img {
  flex: none; width: 74px; height: 74px; object-fit: contain;
  background: #fff; border-radius: var(--r-xs); padding: 5px;
}
@media (max-width: 460px) {
  .rule-ref__sign { flex-direction: column; }
}

/* -------------------------------------------------- экран со сводом */

.rule-search { width: 100%; }

/* Оглавление плиткой: 26 разделов списком в столбик — это экран с
   лишним, а нужен один взгляд и попадание пальцем. */
.rule-toc {
  display: grid; gap: 8px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rule-toc__i {
  display: block; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text-2); font-size: 13.5px; line-height: 1.4;
  min-height: 44px;
}
.rule-toc__i:hover { border-color: var(--amber); color: var(--text); }
.rule-toc__i b {
  display: inline-block; min-width: 1.9em; color: var(--amber-soft);
  font-family: var(--mono); font-weight: 700;
}

.rule-sec { margin-bottom: 34px; scroll-margin-top: 0; }
.rule-sec__t {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.rule-sec__n {
  flex: none; font-family: var(--mono); color: var(--amber);
  font-size: 15px; font-variant-numeric: tabular-nums;
}

/* Номер отдельной колонкой: по своду ищут глазами по номеру, и когда он
   вбит в начало абзаца, взгляд его не цепляет. */
.rule-cl {
  display: grid; grid-template-columns: 4.4em 1fr; gap: 4px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.rule-cl:last-child { border-bottom: 0; }
.rule-cl__n {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: var(--amber-soft); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.rule-cl__t p {
  margin: 0 0 8px; color: var(--text-2); font-size: 15px; line-height: 1.66;
}
.rule-cl__t p:last-child { margin-bottom: 0; }
.rule-cl__sec {
  display: block; margin-top: 8px; font-size: 12px; color: var(--text-3);
}
/* Подсветка пункта, на который пришли по ссылке из разбора. */
.rule-cl.is-target {
  background: var(--amber-glow); border-radius: var(--r-sm);
  padding-left: 12px; padding-right: 12px;
}

.rule-found__n { color: var(--text-3); font-size: 13.5px; margin: 0 0 14px; }

@media (max-width: 560px) {
  .rule-cl { grid-template-columns: 1fr; gap: 2px; }
  .rule-cl__n { padding-top: 0; }
  .rule-toc { grid-template-columns: 1fr 1fr; }
  .rule-toc__i { font-size: 12.5px; }
}

/* Пометка «фрагмент». Обязательна: под ответом лежит вырезка из закона,
   и человек должен понимать, что видит часть, а не весь пункт. Рядом с
   ней всегда идёт раскрытие «Пункт целиком» — прятать остальное нельзя,
   иначе мы выдаём свой пересказ за первоисточник. */
.rule-ref__cut {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--text-3);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}

.rule-ref__full { margin-top: 10px; }
.rule-ref__full > summary {
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 700; color: var(--cyan);
  padding: 6px 0;
}
.rule-ref__full > summary::-webkit-details-marker { display: none; }
.rule-ref__full > summary::before { content: '+ '; }
.rule-ref__full[open] > summary::before { content: '− '; }
.rule-ref__full[open] > summary { color: var(--text-3); }
.rule-ref__full p { color: var(--text-3); }

/* Компактные карточки знаков. Когда в вопросе их четыре, крупными они
   уводят разбор и кнопку «Дальше» за экран, а мелкими — читаются одним
   взглядом и отвечают на «а что это за знак» сразу. */
.sign-minis {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.sign-mini {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr;
  gap: 2px 10px; align-items: start;      /* не center: у длинных названий
                                             карточка растёт, и знак уезжал
                                             от своего номера вниз */
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border-soft);
  color: var(--text);
}
.sign-mini:hover { border-color: var(--amber); color: var(--text); }
.sign-mini img {
  grid-row: 1 / 3; align-self: start;
  width: 40px; height: 40px; object-fit: contain;
  background: #fff; border-radius: var(--r-xs); padding: 3px;
}
/* Знаки из официального перечня — без картинки: её у нас нет, а пустая
   колонка читается как дыра в карточке. */
.sign-mini--noimg { grid-template-columns: 1fr; }
.sign-mini--noimg img { display: none; }
.sign-mini__n {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--amber-soft); font-variant-numeric: tabular-nums;
}
.sign-mini__t { font-size: 13px; line-height: 1.35; color: var(--text-2); }

/* Остальные пункты и разметка — ссылками в строку. Разворачивать их
   тоже значит завалить экран текстом; номер с подписью даёт понять,
   что ещё сюда относится, и увести в свод одним нажатием. */
.rule-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rule-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text-2); min-height: 34px; display: inline-flex; align-items: center;
}
.rule-chip:hover { border-color: var(--cyan); color: var(--text); }

/* Ссылка на категорию знака прилипала к концу описания без отбивки —
   получалось «…запрещено.Предписывающие знаки». */
.rule-ref__sign .rule-ref__more { display: block; margin-top: 8px; }