/* Страницы монет.
 *
 * Отдельный файл, а не общий app.css, намеренно: тот весит под сотню
 * килобайт и написан для приложения с боковым меню, панелями и графиком.
 * Странице, которую человек открыл из поиска, нужно одно — чтобы она
 * прочиталась сразу и на телефоне. Здесь ровно это и ничего больше.
 */
/* Палитра и шапка берутся из site.css: страницы монет и проверки — часть
   того же сайта, и держать им свои цвета значит выглядеть чужими. Здесь
   остались только правила, которых на витрине нет: таблицы и список. */
*{box-sizing:border-box}

a{color:var(--ink)}


.top{display:flex;align-items:center;justify-content:space-between;
     gap:14px;padding-top:18px;padding-bottom:18px}
.brand{font-weight:700;text-decoration:none;display:flex;flex-direction:column;
       line-height:1.15}
.brand span{font-size:11px;font-weight:400;color:var(--ink-2);
            text-transform:uppercase;letter-spacing:.09em}
.cta{display:inline-block;background:var(--c-blue);color:#17100a;font-weight:600;
     text-decoration:none;padding:9px 15px;border-radius:9px;font-size:14px}
.cta:hover{filter:brightness(1.08)}

h1{font-size:27px;line-height:1.25;margin:14px 0 8px}
h2{font-size:19px;margin:30px 0 8px}
.lead{color:var(--ink-2);margin:0 0 6px}
.muted{color:var(--ink-2)}
p{margin:9px 0}

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair)}
th{color:var(--ink-2);font-weight:500;font-size:12px;
   text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover{background:var(--panel)}

.coins{list-style:none;margin:16px 0;padding:0;display:grid;
       grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.coins li{background:var(--panel);border:1px solid var(--hair);border-radius:10px;
          padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.coins a{font-weight:600;text-decoration:none}
.coins span{font-size:12px}

.go{margin:26px 0 8px}
footer{border-top:1px solid var(--hair);margin-top:34px;padding-top:16px;
       padding-bottom:34px;font-size:13px;color:var(--ink-2)}
footer a{color:var(--ink-2)}
footer p{margin-top:9px;font-size:12px}

@media (max-width:560px){
  h1{font-size:23px}
  table{font-size:13px}
  th,td{padding:7px 6px}
  /* На телефоне пятая колонка уводит таблицу за экран, а она пояснение,
     а не число: прячем её, смысл остаётся в тексте над таблицей. */
  th:nth-child(5),td:nth-child(5){display:none}
}

/* Страницы монет и проверки живут в стиле витрины, но им нужен свой воздух:
   это читаемые страницы, а не экраны приложения. */
main.wrap{padding-block:clamp(26px,4vw,44px) clamp(40px,6vw,72px)}
main.wrap h1{font-size:clamp(27px,3.6vw,40px);line-height:1.16;
  margin:6px 0 10px;letter-spacing:-.02em}
main.wrap h2{font-size:clamp(20px,2.4vw,27px);margin:clamp(34px,5vw,56px) 0 12px}
main.wrap .eyebrow{margin-top:clamp(34px,5vw,56px);margin-bottom:6px}
main.wrap h2 + p,main.wrap p{max-width:820px}
main.wrap table{background:var(--panel);border:1px solid var(--hair);
  border-radius:14px;overflow:hidden;margin:14px 0}
main.wrap th,main.wrap td{padding:11px 16px}
main.wrap tbody tr:last-child td{border-bottom:none}
.coins li:hover{border-color:var(--c-blue)}
.coins a{color:var(--ink)}

/* График на странице монеты. Рисуется на сервере, поэтому виден сразу и
   не ждёт ни библиотеки, ни второго запроса. */
.ch{margin:22px 0 26px;padding:14px 12px 6px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--panel-2);overflow:hidden}
.ch svg{display:block;width:100%;height:auto}