/* Справочные страницы химии (templates/public/chemref.html). Префикс cr-.
   Цвет предмета — --sub / --sub-deep из каталога. */
.cr { --cr-soft: color-mix(in srgb, var(--sub) 10%, #fff); padding-bottom: 72px; }
.cr h1, .cr h2, .cr p, .cr ul, .cr ol { margin: 0; }
.cr ul, .cr ol { padding: 0; list-style: none; }

.cr-hd { display: grid; gap: 16px; max-width: 900px; padding: 8px 0 30px; }
.cr-hd h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.cr-hd h1 em { font-style: normal; color: var(--sub-deep); }
.cr-lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.cr-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--ink-2); }
.cr-legend li { display: flex; align-items: center; gap: 8px; }
.cr-legend i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-style: normal; font-weight: 800; }

.cr-block { margin-top: 40px; }
.cr-h2 { font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.025em; margin-bottom: 16px; }
.cr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.cr-two > div { padding: 26px; border-radius: 22px; background: var(--surface); box-shadow: 0 14px 30px -20px rgba(25, 30, 80, .32); }

.cr-tab-w { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border-2); background: var(--surface); }
.cr table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.cr th, .cr td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--border-2); }
.cr thead th { border-top: 0; font-size: 14px; font-weight: 750; color: var(--sub-deep); background: var(--cr-soft); white-space: nowrap; }
.cr tbody th { font-weight: 650; }
.cr small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.cr td small { display: inline; }
.cr-f { white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; }

/* таблица растворимости: клетки-буквы, первая колонка закреплена */
.cr-sol table { min-width: 720px; }
.cr-sol th, .cr-sol td { text-align: center; padding: 8px 6px; }
.cr-sol tbody th { position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 12px; background: var(--surface); white-space: nowrap; }
.cr-sol .cr-corner { position: sticky; left: 0; z-index: 2; text-align: left; font-size: 12px; color: var(--muted); }
.cr-sol td { font-weight: 800; font-size: 15px; border-left: 1px solid var(--border-2); }
.cr-r { background: #e3f7ef; color: #0e8a5f; }
.cr-m { background: #fff4d6; color: #a06a00; }
.cr-n { background: #fde7e2; color: #c2412a; }
.cr-x { background: #eef0f4; color: #7a8094; }
.cr-note { margin-top: 10px; font-size: 14px; color: var(--muted); }

.cr-steps { counter-reset: crs; display: grid; gap: 12px; }
.cr-steps li { counter-increment: crs; position: relative; padding-left: 40px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cr-steps li::before { content: counter(crs); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--sub); }
.cr-rules { display: grid; gap: 10px; }
.cr-rules li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cr b { color: var(--ink); }

.cr-go { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cr-go a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 10px 24px -18px rgba(25, 30, 80, .35); text-decoration: none; color: inherit; }
.cr-go a:hover b { color: var(--sub-deep); }
.cr-more { margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.cr-cta { margin-top: 40px; }

@media (max-width: 760px) {
  .cr-lead { font-size: 16px; }
  .cr-two > div { padding: 20px 16px; }
  .cr table { font-size: 14.5px; }
  .cr th, .cr td { padding: 9px 8px; }
  .cr-wide { display: none; }  /* основность — на телефоне лишняя колонка */
  .cr-cta .btn { width: 100%; justify-content: center; text-align: center; }
}