/* Справочник pro-color.ru (ТЗ-36): словарь терминов и «Как выбрать». Подключается после tech.css.
   --sp-head (высота шапки) и --sp-off (шапка + панель поиска) ставит sprav.js; без JS — запасные значения. */

/* ---------- Словарь: панель поиска, темы, алфавит ---------- */
.sp-dict { padding-top: 40px; }
.sp-tools { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 12px 16px; align-items: center; margin-bottom: 12px; }
.sp-search { position: relative; }
.sp-search .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pc-text-light); pointer-events: none; }
.sp-search input { padding-left: 40px; height: 46px; border-radius: 99px; }
.sp-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-topics button { border: 1px solid var(--pc-border); background: #fff; color: var(--pc-dark); border-radius: 99px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.sp-topics button span { color: var(--pc-text-light); font-weight: 400; margin-left: 2px; }
.sp-topics button:hover { border-color: var(--pc-cyan); }
.sp-topics button[aria-pressed="true"] { background: var(--pc-dark); border-color: var(--pc-dark); color: #fff; }
.sp-topics button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }
.sp-abc { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 0 12px; border-bottom: 1px solid var(--pc-border); margin-bottom: 8px; }
.sp-abc a, .sp-abc span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 32px; padding: 0 4px; border-radius: 6px; font-weight: 700; font-size: 15px; }
.sp-abc a { color: var(--pc-link); }
.sp-abc a:hover { background: #EEF7FC; }
.sp-abc a.is-off { color: #A3ADB8; pointer-events: none; }
.sp-abc span { color: #A3ADB8; font-weight: 500; }
.sp-abc .sp-abc-lat { font-family: inherit; }
.sp-abc .sp-abc-lat:first-of-type { margin-left: 10px; }
.js-sp .sp-head-bar { position: sticky; top: var(--sp-head, 0px); z-index: 20; background: #fff; }
.sp-found { margin: 8px 0 0; font-size: 14px; color: var(--pc-text-light); }
.sp-empty { margin: 24px 0; padding: 16px 20px; background: #FFF5EC; border: 1px solid #FFD9BD; border-radius: var(--pc-radius); }

/* ---------- Словарь: список ---------- */
.sp-letter { padding-top: 16px; scroll-margin-top: var(--sp-off, 120px); }
.sp-letter-h { font-size: 40px; line-height: 1; color: var(--pc-cta); margin: 16px 0 12px; }
.sp-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sp-term { position: relative; background: #fff; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: 18px 20px 16px; scroll-margin-top: var(--sp-off, 120px); }
.sp-term:target, .sp-term.is-hl { border-color: var(--pc-cyan); box-shadow: 0 0 0 3px rgba(0, 160, 227, .18); }
.sp-term h3 { font-size: 19px; margin: 0 0 2px; padding-right: 90px; color: var(--pc-dark); }
.sp-term h3:hover .tk-anchor, .sp-term:target .tk-anchor { opacity: 1; }
.sp-alt { margin: 0 0 8px; font-size: 14px; color: #555; font-style: italic; }
.sp-def { margin: 6px 0 8px; font-size: 16px; line-height: 1.6; color: var(--pc-text); }
.sp-us { margin: 0 0 6px; font-size: 15px; line-height: 1.5; padding: 6px 10px; border-radius: 6px; background: #F2FAF5; }
.sp-us b { color: var(--pc-dark); }
.sp-us--partner, .sp-us--contractor, .sp-us--supplier { background: #EEF7FC; }
.sp-us--no { background: #FFF5EC; }
.sp-links { margin: 6px 0 0; font-size: 14px; color: var(--pc-text-light); display: grid; gap: 2px; }
.sp-links a { font-weight: 600; }
.sp-topic { position: absolute; right: 16px; top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #4F5B67; background: #EEF2F6; border-radius: 99px; padding: 3px 9px; }
.sp-term[hidden], .sp-letter[hidden] { display: none; }

/* ---------- Карточки сравнений ---------- */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sp-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #fff; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); color: var(--pc-text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sp-card:hover { border-color: var(--pc-cyan); box-shadow: var(--pc-shadow); transform: translateY(-2px); color: var(--pc-text); }
.sp-card b { font-size: 17px; line-height: 1.3; color: var(--pc-dark); }
.sp-card span { font-size: 14.5px; line-height: 1.45; color: var(--pc-text-light); }

/* ---------- Хаб ---------- */
.sp-hub { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-hub li:first-child { grid-column: 1 / -1; }
.sp-hub-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 28px 24px; background: #fff; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); color: var(--pc-text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sp-hub-card:hover { border-color: var(--pc-cyan); box-shadow: var(--pc-shadow-lg); transform: translateY(-2px); color: var(--pc-text); }
.sp-hub-card h2 { font-size: 22px; line-height: 1.3; margin: 0; padding-right: 48px; color: var(--pc-dark); }
.sp-hub-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pc-text-light); }
.sp-hub-n { position: absolute; right: 22px; top: 18px; font-size: 32px; font-weight: 700; color: rgba(10, 22, 40, .08); }
.sp-hub-go { margin-top: auto; font-weight: 700; color: var(--pc-link); }
.sp-hub-dict { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 20px 24px; border-radius: var(--pc-radius-lg); background: var(--pc-dark); color: rgba(255, 255, 255, .8); }
.sp-hub-dict:hover { color: #fff; background: var(--pc-dark-soft); }
.sp-hub-dict .bi { font-size: 28px; color: var(--pc-cyan); }
.sp-hub-dict b { color: #fff; }
.sp-hub-dict > span:last-child { margin-left: auto; font-size: 22px; color: var(--pc-cta); }

/* ---------- Сравнение ---------- */
.sp-table table { min-width: 860px; }
.sp-table td, .sp-table th { font-size: 14.5px; line-height: 1.45; }
.sp-table thead th { white-space: normal; }
.sp-table tbody th { position: sticky; left: 0; background: #fff; min-width: 150px; box-shadow: 1px 0 0 #EDEFF2; }
.sp-table tbody tr:hover th { background: #FAFCFE; }
.sp-scen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.sp-scroll-hint { display: none; margin: 0 0 6px; font-size: 13.5px; color: var(--pc-text-light); }
.sp-scen li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid var(--pc-border); border-left: 4px solid var(--pc-cta); border-radius: var(--pc-radius); }
.sp-scen b { color: var(--pc-dark); font-size: 16.5px; }
.sp-scen span { font-size: 15.5px; line-height: 1.55; }
.sp-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--pc-border); color: var(--pc-dark); font-size: 15px; font-weight: 600; }
.sp-chips a:hover { border-color: var(--pc-cta); color: var(--pc-dark); }
.sp-chips--terms a { font-weight: 500; font-size: 14.5px; padding: 6px 12px; }

@media (max-width: 991.98px) {
  .sp-tools { grid-template-columns: 1fr; }
  .sp-terms, .sp-hub, .sp-where { grid-template-columns: 1fr; }
  .sp-scen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-scroll-hint { display: block; }
  .sp-where { gap: 28px; }
  .js-sp .sp-head-bar { position: static; }
}
@media (max-width: 575.98px) {
  .sp-topics { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .sp-topics button { flex: 0 0 auto; }
  .sp-abc a, .sp-abc span { min-width: 26px; height: 30px; font-size: 14px; }
  .sp-term { padding: 16px; }
  .sp-scen { grid-template-columns: 1fr; }
  .sp-term h3 { padding-right: 0; font-size: 18px; }
  .sp-topic { position: static; display: inline-block; margin-top: 8px; }
  .sp-hub-card { padding: 22px 20px 20px; }
  .sp-hub-card h2 { font-size: 19px; }
  .sp-hub-dict { flex-wrap: wrap; }
  .sp-table tbody th { min-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-card:hover, .sp-hub-card, .sp-hub-card:hover { transition: none; transform: none; } }