/* ═══ Сравнение монет ═══
   Общие переменные, шапка, кнопки и подвал — из styles.css. */

.cp-main{padding-block:0 clamp(30px,4vw,50px)}

.cp-head{padding-block:0 clamp(16px,2vw,22px);
  background:linear-gradient(180deg,#f7fbf9,var(--card) 70%)}
.cp-main h1{font-size:clamp(28px,3.6vw,42px);line-height:1.15;
  letter-spacing:-.03em;font-weight:800;margin:0 0 12px}
.cp-lede{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:72ch;margin:0 0 clamp(14px,1.8vw,20px)}

/* ── Выбор монет ── */
.cp-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cp-tools select{padding:9px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer;min-width:210px}
.cp-tools select:focus{outline:0;border-color:var(--green)}
.cp-per{display:flex;flex-wrap:wrap;gap:6px}
.cp-p{padding:8px 13px;font:inherit;font-size:13px;font-weight:600;
  border-radius:9px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-soft);cursor:pointer;transition:.15s}
.cp-p:hover{border-color:var(--green);color:var(--green-deep)}
.cp-p.on{background:var(--green);border-color:var(--green);color:#fff}

/* Выбранные монеты — плашками, каждая своего цвета. Цвет закреплён за
   монетой, а не за местом в списке: убрали одну — остальные не
   перекрасились. */
.cp-picked{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.cp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;
  border-radius:99px;border:1px solid var(--line-2);background:var(--card);
  font-size:13px;font-weight:600;color:var(--ink)}
.cp-chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.cp-chip button{border:0;background:none;cursor:pointer;color:var(--ink-faint);
  font-size:15px;line-height:1;padding:0 2px}
.cp-chip button:hover{color:var(--red)}

/* ── График ── */
.cp-box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,2vw,20px);box-shadow:var(--shadow-sm);
  margin-block-start:clamp(16px,2vw,22px)}
.cp-box h2{font-size:16px;font-weight:700;margin:0 0 4px}
.cp-box p.hint{font-size:12.5px;line-height:1.55;color:var(--ink-faint);
  margin:0 0 12px}
.cp-chart{height:clamp(300px,44vh,440px);width:100%}

/* ── Таблица итогов ── */
.cp-table{width:100%;border-collapse:collapse;font-size:14px;
  margin-block-start:4px}
.cp-table th{text-align:right;font-weight:600;font-size:12.5px;
  color:var(--ink-soft);padding:9px 10px;border-block-end:1px solid var(--line);
  white-space:nowrap}
.cp-table th:first-child{text-align:left}
.cp-table td{text-align:right;padding:11px 10px;white-space:nowrap;
  border-block-end:1px solid var(--line);font-variant-numeric:tabular-nums}
.cp-table td:first-child{text-align:left}
.cp-table tr:last-child td{border-block-end:0}
.cp-name{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink);font-weight:700}
.cp-name .dot{width:9px;height:9px;border-radius:50%;flex:none}
.cp-name:hover{color:var(--green-deep)}

.up{color:var(--green);font-weight:600}
.down{color:var(--red);font-weight:600}
.zero{color:var(--ink-faint)}

.cp-msg{padding:22px;text-align:center;color:var(--ink-soft);font-size:14px}
.cp-note{max-width:80ch;margin:clamp(16px,2vw,24px) 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink-faint)}

@media (max-width:700px){
  .cp-tools select{min-width:0;flex:1 1 100%}
  .cp-per{flex:1 1 100%}
  .cp-chart{height:280px}
  /* Волатильность на телефоне не помещается — она здесь справочная. */
  .cp-vola{display:none}
}