/* Оформление сайта (выбранный вариант C — «Friendly»).
   Светлый или тёмный — как настроено в системе пользователя, либо как выбрал посетитель кнопкой в шапке.
   Крупный текст, мягкие формы, поиск и фильтры прилипают к верху экрана при прокрутке. */

:root {
  color-scheme: light;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f1efeb;
  --header-bg: #fbfaf8;
  --border: #e2ded6;
  --text: #1c1917;
  --muted: #57534e;
  --accent: #0f766e;
  --accent-text: #0f766e;
  --on-accent: #ffffff;
  --focus: #0f766e;
  --good: #15803d;
  --good-text: #15803d;
  --good-button: #15803d;
  --on-good: #ffffff;
  --good-soft: #effaf3;
  --good-border: #9bdbb2;
  --radius: 20px;
  --radius-small: 14px;
  --font-size: 17px;
  --glow: 22%;
  --shadow: 0 2px 10px rgb(28 25 23 / 0.06);

  --common: #57534e;
  --uncommon: #15803d;
  --rare: #1d4ed8;
  --legendary: #b91c1c;
  --godly: #be185d;
  --ancient: #6d28d9;
  --vintage: #a16207;
  --unique: #c2410c;

  --chart-text: #57534e;
  --chart-grid: #ebe7e0;
  /* Цвета линий сайтов на графике: проверены на различимость, в том числе при дальтонизме */
  --line-1: #2a78d6;
  --line-2: #eb6834;
  --line-3: #1baf7a;
  --line-off: rgb(120 113 108 / 0.35);
  --down: #b91c1c;
  /* Значок «Top gainer» на странице сравнения */
  --gold-text: #92400e;
  --gold-soft: #fef3c7;
}

/* Тёмная тема. data-theme на <html> ставит скрипт в <head> (templates/layout.js):
   по выбору посетителя (кнопка в шапке) или, если он не выбирал, — как в системе */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161514;
  --surface: #211f1d;
  --surface-2: #2d2a27;
  --header-bg: #161514;
  --border: #3b3733;
  --text: #f5f3ef;
  --muted: #b5aea5;
  --accent: #2dd4bf;
  --accent-text: #5eead4;
  --on-accent: #042f2e;
  --focus: #5eead4;
  --good: #4ade80;
  --good-text: #4ade80;
  --good-button: #4ade80;
  --on-good: #052e12;
  --good-soft: color-mix(in srgb, #4ade80 10%, #211f1d);
  --good-border: color-mix(in srgb, #4ade80 40%, transparent);
  --shadow: none;

  --common: #d6d3d1;
  --uncommon: #4ade80;
  --rare: #60a5fa;
  --legendary: #f87171;
  --godly: #f472d0;
  --ancient: #a78bfa;
  --vintage: #facc15;
  --unique: #fb923c;

  --chart-text: #b5aea5;
  --chart-grid: #3b3733;
  --line-1: #3987e5;
  --line-2: #d95926;
  --line-3: #199e70;
  --line-off: rgb(168 162 158 / 0.3);
  --down: #f87171;
  --gold-text: #fbbf24;
  --gold-soft: color-mix(in srgb, #fbbf24 14%, #211f1d);
}

/* Поиск и фильтры всегда под рукой, даже в конце длинного списка */
.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -16px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
}

/* На телефоне панель занимает почти половину экрана, поэтому при прокрутке вниз она уезжает вверх,
   а при прокрутке вверх — возвращается (класс ставит home.js) */
@media (max-width: 719px) {
  .filters { transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .filters.is-hidden { transform: translateY(calc(-100% - 4px)); }
}

.page-title { font-size: 28px; }

.card-body { padding: 12px 14px 14px; }

/* Цена в «таблетке» — сразу бросается в глаза */
.card-price {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 12px;
  border-radius: var(--radius-small);
  background: var(--surface-2);
}

.button { border-radius: 999px; }


/* ---------- Цветовые гаммы (10 ноября 2026, образец design/colors.html) ----------
   Посетитель выбирает гамму в панели Appearance (кнопка темы в шапке). Атрибут data-palette на <html>
   ставит скрипт в <head> (выбор помнится в localStorage 'palette'). Teal — гамма по умолчанию (без атрибута).
   Меняются только фон, поверхности, текст и акцент; цвета редкостей, «дешевле/дороже» и линии графиков — общие */

/* Midnight violet */
:root[data-palette="violet"] {
  --bg: #f8f7fc;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0eef8;
  --border: #e1ddf0;
  --text: #17142b;
  --muted: #5b5675;
  --accent: #6d28d9;
  --accent-text: #6d28d9;
  --on-accent: #ffffff;
  --focus: #6d28d9;
  --shadow: 0 2px 12px rgb(60 30 140 / 0.08);
  --chart-text: #5b5675;
  --chart-grid: #e9e6f4;
}
:root[data-palette="violet"][data-theme="dark"] {
  --bg: #13111c;
  --header-bg: #181526;
  --surface: #1d1a2b;
  --surface-2: #282438;
  --border: #38324d;
  --text: #f3f1fa;
  --muted: #b4aecb;
  --accent: #a78bfa;
  --accent-text: #c4b5fd;
  --on-accent: #1e1035;
  --focus: #c4b5fd;
  --shadow: none;
  --chart-text: #b4aecb;
  --chart-grid: #38324d;
  --good-soft: color-mix(in srgb, #4ade80 10%, #1d1a2b);
  --gold-soft: color-mix(in srgb, #fbbf24 14%, #1d1a2b);
}

/* Candy pop */
:root[data-palette="candy"] {
  --bg: #fff8fb;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fceff5;
  --border: #f3d9e5;
  --text: #2a1520;
  --muted: #6e5160;
  --accent: #be185d;
  --accent-text: #be185d;
  --on-accent: #ffffff;
  --focus: #be185d;
  --shadow: 0 2px 12px rgb(190 24 93 / 0.07);
  --chart-text: #6e5160;
  --chart-grid: #f6e3ec;
}
:root[data-palette="candy"][data-theme="dark"] {
  --bg: #1a1216;
  --header-bg: #20161b;
  --surface: #24181e;
  --surface-2: #31212a;
  --border: #47303b;
  --text: #fbf1f5;
  --muted: #c9adbb;
  --accent: #f472b6;
  --accent-text: #f9a8d4;
  --on-accent: #3b0a24;
  --focus: #f9a8d4;
  --shadow: none;
  --chart-text: #c9adbb;
  --chart-grid: #47303b;
  --good-soft: color-mix(in srgb, #4ade80 10%, #24181e);
  --gold-soft: color-mix(in srgb, #fbbf24 14%, #24181e);
}

/* Ocean blue */
:root[data-palette="ocean"] {
  --bg: #f6f9fc;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf2f8;
  --border: #dbe3ee;
  --text: #0f1a2a;
  --muted: #4f5d70;
  --accent: #1d4ed8;
  --accent-text: #1d4ed8;
  --on-accent: #ffffff;
  --focus: #1d4ed8;
  --shadow: 0 2px 12px rgb(15 40 90 / 0.07);
  --chart-text: #4f5d70;
  --chart-grid: #e3e9f2;
}
:root[data-palette="ocean"][data-theme="dark"] {
  --bg: #0d131b;
  --header-bg: #111926;
  --surface: #151e2b;
  --surface-2: #1e2938;
  --border: #2c3a4d;
  --text: #eef3fa;
  --muted: #a7b4c6;
  --accent: #60a5fa;
  --accent-text: #93c5fd;
  --on-accent: #0b1a33;
  --focus: #93c5fd;
  --shadow: none;
  --chart-text: #a7b4c6;
  --chart-grid: #2c3a4d;
  --good-soft: color-mix(in srgb, #4ade80 10%, #151e2b);
  --gold-soft: color-mix(in srgb, #fbbf24 14%, #151e2b);
}

/* Gold & ink */
:root[data-palette="gold"] {
  --bg: #fbf9f4;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4efe4;
  --border: #e7dfcd;
  --text: #1c160c;
  --muted: #5f5442;
  --accent: #b45309;
  --accent-text: #92400e;
  --on-accent: #ffffff;
  --focus: #92400e;
  --shadow: 0 2px 12px rgb(90 60 10 / 0.07);
  --chart-text: #5f5442;
  --chart-grid: #efe8d8;
}
:root[data-palette="gold"][data-theme="dark"] {
  --bg: #14120f;
  --header-bg: #181511;
  --surface: #1e1b16;
  --surface-2: #2a251d;
  --border: #3d3527;
  --text: #f8f3e8;
  --muted: #bfb39b;
  --accent: #fbbf24;
  --accent-text: #fcd34d;
  --on-accent: #2a1a03;
  --focus: #fcd34d;
  --shadow: none;
  --chart-text: #bfb39b;
  --chart-grid: #3d3527;
  --good-soft: color-mix(in srgb, #4ade80 10%, #1e1b16);
  --gold-soft: color-mix(in srgb, #fbbf24 14%, #1e1b16);
}