/* FR-510 · «Карточки-картины» — 6 верхних плиток вкладки «Сводка».
   Палитра, размеры, SVG-сюжеты и кейфреймы перенесены буквально из эталона
   «Дизайн карточек-картин.zip» (вариант 1c, Cards 1c Production.dc.html).
   Слои карточки снизу вверх: градиент → сюжет → зерно холста → контент. */

/* 3 × 232px + 2 × 20px = 736px — ширина сетки из эталона. */
.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 736px;
}
/* даём сетке её натуральные 736px рядом с блоком «Что необходимо сделать» */
.ov-page .ov-top { grid-template-columns: 2fr 1fr; }

.art-card {
  position: relative;
  overflow: hidden;
  height: 212px;
  border-radius: 22px;
  box-shadow: 0 20px 42px -26px rgba(70, 48, 20, .5);
  font-family: "Space Grotesk", var(--head), sans-serif;
  color: #2b2420;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* единый hover вкладки «Обзор» — как у .card/.act-card в app.css: подъём,
   мягкая тень и акцентная подсветка (кольцом — у карточки нет border) */
.ov-page .art-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent),
    0 20px 42px -26px rgba(70, 48, 20, .5),
    var(--shadow-soft);
}
@media (prefers-reduced-motion: reduce) {
  .ov-page .art-card:hover { transform: none; }
}

.art-bg, .art-scene, .art-grain { position: absolute; inset: 0; }
.art-scene, .art-grain { pointer-events: none; }
.art-scene {
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: 78%;
  opacity: .5;
  mix-blend-mode: soft-light;
}
.art-grain {
  background-image: radial-gradient(rgba(40, 28, 14, .05) .6px, transparent .7px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.art-body {
  position: relative;
  height: 100%;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* wrap — как у прежнего .kpi-top: на узкой карточке контрол переносится под подпись */
.art-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 8px; flex-wrap: wrap; }
.art-labelwrap {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; max-width: 150px; line-height: 1.35;
}
.art-label {
  font-family: "Space Mono", var(--mono), monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(43, 36, 32, .62);
}
/* «?» — подсказка по hover и по click (тач-устройства) */
.art-q {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(120, 90, 50, .28);
  color: rgba(43, 36, 32, .6);
  font-family: "Space Mono", var(--mono), monospace; font-size: 10px; font-weight: 700;
  cursor: help; transition: background .18s, color .18s, border-color .18s;
}
.art-q:hover, .art-q:focus-visible {
  background: #fff; color: #2b2420; border-color: rgba(120, 90, 50, .5);
}

.art-hint {
  display: none;
  position: absolute; left: 18px; right: 18px; top: 46px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(28, 22, 17, .9); color: #f6f1e6;
  font-family: "Space Mono", var(--mono), monospace; font-size: 11px; line-height: 1.45;
  box-shadow: 0 12px 26px -12px rgba(28, 22, 17, .65);
  backdrop-filter: blur(3px); z-index: 3; text-wrap: pretty;
  /* у длинных подписей «?» уезжает под саму подсказку — не перехватываем курсор */
  pointer-events: none;
}
.art-hint.on { display: block; }

.art-foot { display: flex; flex-direction: column; gap: 6px; }
.art-value {
  font-family: "Space Grotesk", var(--head), sans-serif;
  font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.015em;
  white-space: nowrap; color: #2b2420;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.art-value.pos { color: #4f7a52; }
.art-value.neg { color: #b25a37; }
.art-sub {
  font-family: "Space Mono", var(--mono), monospace;
  font-size: 12px; color: rgba(43, 36, 32, .58);
}

/* переключатель периода — только на карточке «Доходность» */
.art-seg {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(120, 90, 50, .2);
  border-radius: 8px; backdrop-filter: blur(2px);
}
.art-seg-btn {
  padding: 2px 8px; border: none; border-radius: 6px; background: transparent;
  color: rgba(43, 36, 32, .5);
  font-family: "Space Mono", var(--mono), monospace; font-size: 11px; font-weight: 700;
  transition: background .15s, color .15s, box-shadow .15s;
}
.art-seg-btn:hover { color: #2b2420; }
.art-seg-btn.on { background: #fff; color: #2b2420; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

/* ---------- слой 1: градиентный фон, свой оттенок у каждой метрики ---------- */
.art-gold  .art-bg { background: linear-gradient(315deg, #f2e7cf 0%, #e6cd93 55%, #c99f49 122%); }
.art-green .art-bg { background: linear-gradient(315deg, #e7ede1 0%, #b7ccaa 55%, #7d996c 122%); }
.art-rust  .art-bg { background: linear-gradient(315deg, #f1e5da 0%, #e0b69e 55%, #c06e48 122%); }
.art-olive .art-bg { background: linear-gradient(315deg, #ece7d5 0%, #cbc39a 55%, #988f64 122%); }
.art-teal  .art-bg { background: linear-gradient(315deg, #e2e9e6 0%, #aecac4 55%, #5f8a86 122%); }
.art-plum  .art-bg { background: linear-gradient(315deg, #ece0e3 0%, #d0abb8 55%, #9a6d80 122%); }

/* ---------- слой 2: бледный сюжет + ненавязчивая анимация ---------- */
@keyframes artDrift {
  0%   { transform: translate(-14px, 4px) scale(1.06); }
  50%  { transform: translate(2px, -6px) scale(1.12); }
  100% { transform: translate(14px, 3px) scale(1.07); }
}
@keyframes artRise {
  0%   { transform: translateY(10px) scaleY(.94); }
  50%  { transform: translateY(-6px) scaleY(1.06); }
  100% { transform: translateY(-11px) scaleY(1.02); }
}
@keyframes artSway {
  0%   { transform: translateY(-12px) rotate(-5deg); }
  50%  { transform: translateY(4px) rotate(3deg); }
  100% { transform: translateY(12px) rotate(5deg); }
}
@keyframes artSpin {
  0%   { transform: rotate(-13deg) scale(1); }
  50%  { transform: rotate(4deg) scale(1.08); }
  100% { transform: rotate(13deg) scale(1.03); }
}

/* рассветная гряда с солнцем — стоимость активов */
.art-gold .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'170'%20cy%3D'60'%20r%3D'28'%20fill%3D'rgba(255%2C255%2C255%2C.26)'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M0%20150%20L52%2096%20L92%20128%20L140%2074%20L186%20114%20L232%2080%20L232%20212%20L0%20212%20Z'%20fill%3D'rgba(255%2C255%2C255%2C.13)'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M0%20180%20L60%20134%20L104%20160%20L150%20120%20L200%20154%20L232%20130%20L232%20212%20L0%20212%20Z'%20fill%3D'rgba(255%2C255%2C255%2C.2)'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E");
  animation: artDrift 9s ease-in-out infinite alternate;
}
/* восходящий склон — доходность */
.art-green .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M0%20176%20C52%20160%2092%20108%20132%2096%20S198%2062%20232%2042%20L232%20212%20L0%20212%20Z'%20fill%3D'rgba(255%2C255%2C255%2C.15)'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M0%20176%20C52%20160%2092%20108%20132%2096%20S198%2062%20232%2042'%20stroke%3D'rgba(255%2C255%2C255%2C.6)'%2F%3E%3Ccircle%20cx%3D'204'%20cy%3D'50'%20r%3D'6'%20fill%3D'rgba(255%2C255%2C255%2C.75)'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E");
  animation: artDrift 7.5s ease-in-out infinite alternate;
}
/* нисходящая долина — просадка */
.art-rust .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M0%2050%20C52%2070%2092%20128%20132%20142%20S198%20174%20232%20192%20L232%20212%20L0%20212%20Z'%20fill%3D'rgba(255%2C255%2C255%2C.12)'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M0%2050%20C52%2070%2092%20128%20132%20142%20S198%20174%20232%20192'%20stroke%3D'rgba(255%2C255%2C255%2C.55)'%2F%3E%3C%2Fsvg%3E");
  animation: artDrift 8.5s ease-in-out infinite alternate;
}
/* монеты — доля кэша */
.art-olive .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'92'%20cy%3D'124'%20r%3D'40'%20fill%3D'rgba(255%2C255%2C255%2C.13)'%20stroke%3D'rgba(255%2C255%2C255%2C.42)'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'98'%20r%3D'30'%20fill%3D'rgba(255%2C255%2C255%2C.11)'%20stroke%3D'rgba(255%2C255%2C255%2C.46)'%2F%3E%3Cpath%20d%3D'M92%2084%20A40%2040%200%200%201%20130%20150'%20stroke%3D'rgba(255%2C255%2C255%2C.72)'%20stroke-width%3D'3.2'%2F%3E%3C%2Fsvg%3E");
  animation: artSpin 11s ease-in-out infinite alternate;
}
/* растущие столбцы — доля акций */
.art-teal .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C.18)'%20stroke%3D'none'%3E%3Crect%20x%3D'28'%20y%3D'122'%20width%3D'26'%20height%3D'56'%20rx%3D'3'%2F%3E%3Crect%20x%3D'70'%20y%3D'84'%20width%3D'26'%20height%3D'94'%20rx%3D'3'%2F%3E%3Crect%20x%3D'112'%20y%3D'104'%20width%3D'26'%20height%3D'74'%20rx%3D'3'%2F%3E%3Crect%20x%3D'154'%20y%3D'54'%20width%3D'26'%20height%3D'124'%20rx%3D'3'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C.07)'%20stroke%3D'none'%3E%3Crect%20x%3D'28'%20y%3D'182'%20width%3D'26'%20height%3D'16'%20rx%3D'3'%2F%3E%3Crect%20x%3D'70'%20y%3D'182'%20width%3D'26'%20height%3D'26'%20rx%3D'3'%2F%3E%3Crect%20x%3D'112'%20y%3D'182'%20width%3D'26'%20height%3D'20'%20rx%3D'3'%2F%3E%3Crect%20x%3D'154'%20y%3D'182'%20width%3D'26'%20height%3D'30'%20rx%3D'3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  animation: artRise 6s ease-in-out infinite alternate;
}
/* падающие капли — дивиденды */
.art-plum .art-scene {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20232%20212'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.5)'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C.2)'%20stroke%3D'none'%3E%3Cpath%20d%3D'M72%2044%20C86%2072%2090%2086%2072%2086%20C54%2086%2058%2072%2072%2044%20Z'%2F%3E%3Cpath%20d%3D'M150%2082%20C164%20110%20168%20124%20150%20124%20C132%20124%20136%20110%20150%2082%20Z'%2F%3E%3Cpath%20d%3D'M104%20118%20C118%20146%20122%20160%20104%20160%20C86%20160%2090%20146%20104%20118%20Z'%2F%3E%3Cpath%20d%3D'M188%20150%20C198%20170%20201%20180%20188%20180%20C175%20180%20178%20170%20188%20150%20Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  animation: artSway 4.5s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .art-scene { animation: none !important; }
}

/* адаптив: 232px — размер эталона, ниже него карточки ужимаются пропорционально */
/* уже 1300px карточка не вмещает значение в 30px — уменьшаем кегль */
@media (max-width: 1300px) { .art-value { font-size: 24px; } }
/* блоки друг под другом (в app.css порог был 900px — сетке карточек нужно больше) */
@media (max-width: 1150px) { .ov-page .ov-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .art-grid { grid-template-columns: minmax(0, 1fr); } }

/* мобильная версия: габариты плиток строго как у прежних .kpi-card
   (2 колонки, gap 12px, авто-высота от контента, паддинг 14×16, значение 22px) */
@media (max-width: 680px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .art-card { height: auto; border-radius: var(--radius-sm); }
  .art-body { padding: 14px 16px; gap: 6px; }
  .art-foot { gap: 4px; }
  .art-value { font-size: 22px; }
  .art-hint { top: 40px; left: 12px; right: 12px; }
}