/* Раздел «Камни»: витрина склада вставок и карточка камня.

   Отдельным файлом, а не хвостом style.css, — намеренно. В style.css мобильный блок
   (@media max-width:640px) обязан оставаться последним, и любое правило, дописанное
   после него, молча перебивает мобильную вёрстку (см. AGENTS.md). Раздел камней —
   замкнутый кусок интерфейса, ему проще жить в своём файле со своим мобильным блоком
   в конце, чем протискиваться в середину чужого.

   Палитра берётся из style.css (--panel, --line, --dim, --gold и т.д.), поэтому
   тёмная тема работает сама. Единственный свой цвет — --gem: он приходит из данных
   (поле ui в /api/stones) и ставится инлайном на плитку и на карточку. Ни одного
   зашитого в CSS цвета камня здесь нет, иначе новый камень требовал бы правки стилей.

   Цвет камня используется ТОЛЬКО как акцент: заливка «таблеток», кружки линейки,
   тонкая линия. Крупные плашки им не красятся — бесцветный фианит дал бы белый
   прямоугольник, а гранат тёмно-красный, и раздел развалился бы на разные интерфейсы. */

/* ── витрина раздела ───────────────────────────────────────────────────────────── */
#stonesGrid[hidden]{display:none}
.stone-lead{color:var(--dim);max-width:64ch;margin:0 0 22px}
.stone-err{color:var(--dim);padding:24px 0}

.stone-grid{
  display:grid;gap:18px;
  /* auto-fill, а не auto-fit: семь камней не должны растягиваться на всю ширину
     монитора в две гигантские плитки, когда места хватает на четыре нормальных */
  grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
}

.stone-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s;
}
.stone-tile:hover,.stone-tile:focus-visible{
  border-color:var(--gem);transform:translateY(-2px);outline:none;
}
.stone-tile:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--gem) 45%,transparent)}

.stone-shot{
  position:relative;aspect-ratio:1/1;background:var(--shot-bg);
  display:grid;place-items:center;overflow:hidden;
}
/* Едва заметный ореол цвета камня: плитки различаются с одного взгляда, но фон
   остаётся общим для всего каталога — как у изделий. 12% и не больше: на бесцветном
   фианите даже это уже читается. */
.stone-shot::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--gem) 12%,transparent),transparent 68%);
}
.stone-shot img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
/* display:block выше сильнее, чем [hidden] — без этой строки не снятый ещё рендер
   оставлял в плитке alt-текст «сломанной картинки» поверх силуэта. */
.stone-shot img[hidden]{display:none}
/* Силуэт-подложка: он же и запасной вид, если рендер ещё не сделан. Лежит ПОД
   картинкой, поэтому пустой плитки не бывает в принципе. */
.stone-ghost{
  position:absolute;width:52%;height:52%;
  fill:color-mix(in srgb,var(--gem) 30%,transparent);
}
.stone-shot img:not([hidden]) ~ .stone-ghost{display:none}

.stone-cap{padding:14px 16px 16px;border-top:1px solid var(--line)}
.stone-cap h3{font-size:1.32rem;line-height:1.2;margin:2px 0 6px}
.stone-facts{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--dim);font-size:.94rem}
.stone-from{color:var(--text);font-weight:600}
.stone-cuts{margin-top:6px;font-size:.85rem;color:var(--dim)}
.stone-part{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:2px;
  border:1px solid var(--line);font-size:.76rem;color:var(--dim);
}

/* ── карточка камня ────────────────────────────────────────────────────────────── */
.gem-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;padding:4px}

.gem-stage{display:flex;flex-direction:column;gap:14px;min-width:0}

/* МИЛЛИМЕТРОВКА ПОД КАМНЕМ. Число «2,5 мм» само по себе ничего не показывает: много
   это или мало, видно только рядом с чем-то известным. Поэтому камень лежит на листе
   миллиметровой бумаги — не на подложке позади него, а на НАСТОЯЩЕЙ ПЛОСКОСТИ В СЦЕНЕ:
   лист уходит в перспективу, поворачивается вместе с камнем и приближается вместе с ним.
   Плоская картинка позади камня врала бы ровно там, где на неё смотрят: наклонили
   камень — а клетки остались фронтальными, и сравнивать стало не с чем.

   Своей геометрией в движок лист не добавить: там всё, что не камень, рисуется как
   полированный металл, и «металлическая миллиметровка» — не то, что нужно. Зато
   движок отдаёт наружу свою камеру (get view → yaw, pitch, zoom), а угол обзора у него
   постоянный, и зум двигает только дистанцию. Значит ту же камеру можно повторить
   средствами CSS: perspective = (высота сцены / 2) / tg(fov/2) — величина постоянная,
   а приближение целиком уезжает в размер клетки. Синхронизация — в syncFloor()
   (stones.js), там же вывод знаков поворота.

   --mmpx — сторона клетки при базовом приближении. Одна величина и на сетку, и на
   масштаб камня: развести их нельзя, иначе картинка начнёт врать. */
.gem-view{
  --mmpx:22px;
  /* Лист уходит в перспективу, и у горизонта линии сливаются — поэтому контраст
     берём с запасом, иначе вблизи сетка едва различима. Тонкая линия каталога
     (--line) для наклонной плоскости слишком светлая. */
  --gmin:color-mix(in srgb,var(--text) 22%,transparent);   /* клетка 1 мм */
  --gmaj:color-mix(in srgb,var(--text) 45%,transparent);   /* каждые 5 мм — жирнее */
  position:relative;aspect-ratio:1/1;
  border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;overflow:hidden;
  background-color:var(--shot-bg);
}

/* Лист рисуется 2D-канвасом, а не наклонённой CSS-плашкой с фоновым градиентом.
   Причина решающая: у CSS-градиента край линии жёсткий, и в перспективе каждая линия
   рассыпается в лесенку — на пологом ракурсе это первое, что бросается в глаза. 2D-канвас
   кладёт линии со сглаживанием и заодно позволяет гасить их к горизонту по глубине, а не
   грубой круглой маской. Проекция считается той же камерой, что у движка (drawFloor
   в stones.js), поэтому лист и камень стоят в одной сцене, а не рядом. */
.gem-floor{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;display:block;
}
.gem-view::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--gem) 13%,transparent),transparent 62%);
}
/* Канвас движка приходит сюда узлом (showcase.js кладёт .rfx-canvas внутрь хоста)
   и занимает ВСЁ окно показа — никакого CSS-масштабирования. Ужимать его нельзя:
   камень при приближении вырастает за края уменьшенного канваса и обрезается
   прямоугольником, а колесо мыши работает только над самим канвасом, то есть над
   пятачком в несколько десятков пикселей. Размер вставки на сетке задаётся
   отдалением камеры (zoomMin в showcase.js), а не размером холста. */
.gem-view canvas.rfx-canvas{
  position:relative;z-index:1;width:100%;height:100%;display:block;
}
/* Подпись сетки: без неё клетки читаются как декоративная плашка. */
.gem-grid-note{
  position:absolute;left:10px;top:8px;z-index:2;
  font-size:.74rem;color:var(--dim);letter-spacing:.04em;pointer-events:none;
}
.gem-ghost{position:absolute;width:46%;height:46%;fill:color-mix(in srgb,var(--gem) 26%,transparent)}
.gem-view.has3d .gem-ghost{display:none}

.gem-hint{
  position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-size:.82rem;color:var(--dim);transition:opacity .6s;pointer-events:none;
}
.gem-hint.faded{opacity:.55}

/* огранки */
.gem-cuts{display:flex;gap:8px;flex-wrap:wrap}
.gem-cut{
  display:flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .16s;
}
.gem-cut svg{width:19px;height:19px;flex:none;fill:var(--dim);transition:fill .16s}
.gem-cut:hover{border-color:var(--gem)}
.gem-cut.on{border-color:var(--gem);background:color-mix(in srgb,var(--gem) 13%,var(--panel))}
.gem-cut.on svg{fill:var(--gem)}
.gem-onecut{color:var(--dim);font-size:.9rem}
.gem-onecut b{color:var(--text)}

/* правая колонка */
.gem-info{min-width:0}
.gem-info h2{font-size:2.1rem;line-height:1.1;margin:4px 0 8px}
.gem-lead{color:var(--dim);margin-bottom:22px;max-width:46ch}

.gem-sizes-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.gem-scale{font-size:.76rem;color:var(--dim);border-bottom:1px dotted var(--line);cursor:help}

/* ЛИНЕЙКА. Кружки — в миллиметрах CSS, то есть примерно в натуральную величину
   (браузер считает мм от условных 96 dpi). Кликабельная область при этом
   фиксированная: у камня 0,7 мм сам кружок меньше трёх пикселей, и попасть в него
   было бы физически нельзя — промах по цели меньше пальца это не «мелкая деталь»,
   а неработающий интерфейс. */
.gem-ruler{
  display:flex;flex-wrap:wrap;gap:2px;
  align-items:flex-end;                 /* кружки разного размера стоят на одной линии */
}
.gem-size{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:38px;padding:8px 4px 6px;
  background:none;border:1px solid transparent;border-radius:var(--r);
  color:var(--dim);font:inherit;cursor:pointer;transition:border-color .14s,color .14s;
}
.gem-size:hover{border-color:var(--line);color:var(--text)}
.gem-size.on{border-color:var(--gem);color:var(--text);background:color-mix(in srgb,var(--gem) 10%,transparent)}
/* Ряд кружков разной величины должен стоять на общей базовой линии, поэтому высота
   обёртки равна самому большому камню ряда, а сам кружок прижат к низу. */
.gem-dot-wrap{display:flex;align-items:flex-end;justify-content:center;height:11mm}
.gem-dot{
  width:calc(var(--d) * 1mm);height:calc(var(--d) * 1mm);
  border-radius:50%;
  background:color-mix(in srgb,var(--gem) 45%,var(--panel2));
  border:1px solid color-mix(in srgb,var(--gem) 70%,var(--line));
  /* меньше миллиметра кружок вырождается в точку — тонкая обводка держит его видимым */
  min-width:3px;min-height:3px;
}
.gem-size.on .gem-dot{background:var(--gem);border-color:var(--gem)}
.gem-mm{font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* цена */
.gem-price{display:flex;align-items:baseline;gap:10px;margin-top:26px}
.gem-price b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.6rem;line-height:1;font-weight:600;
  /* У Cormorant цифры по умолчанию СТАРОСТИЛЬНЫЕ: «100» выходит как «IOO» и читается
     римской единицей. Для цены это недопустимо — заставляем брать капительные. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.gem-per{color:var(--dim);font-size:.9rem}
.gem-pick{margin-top:4px;color:var(--dim);font-size:.92rem}
.gem-art{margin-left:8px}
.gem-alts{margin-top:8px;font-size:.88rem;color:var(--dim);
  padding-left:11px;border-left:2px solid color-mix(in srgb,var(--gem) 55%,transparent)}

.gem-notes{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.gem-notes p{
  font-size:.88rem;color:var(--dim);line-height:1.5;
  padding-left:11px;border-left:1px solid var(--line);
}

/* ── телефон ───────────────────────────────────────────────────────────────────
   Держать этот блок ПОСЛЕДНИМ в файле. Правило, дописанное ниже, перебьёт мобильную
   вёрстку без всякого предупреждения — ровно та же грабля, что в style.css. */
@media (max-width:860px){
  .gem-card{grid-template-columns:1fr;gap:22px}
  .gem-info h2{font-size:1.8rem}
}
@media (max-width:640px){
  /* Сцена на телефоне вдвое меньше: при клетке 22px в кадр помещалось бы 8 мм, и
     крупные вставки упирались бы в края, потеряв смысл сравнения. */
  .gem-view{--mmpx:13px}
  .stone-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .stone-cap{padding:11px 12px 13px}
  .stone-cap h3{font-size:1.14rem}
  .gem-price b{font-size:2.2rem}
  /* Палец больше кружка: цель по высоте не меньше 44px, сколько бы ни был камень. */
  .gem-size{min-width:44px;min-height:44px;padding:6px 3px}
  .gem-dot-wrap{height:9mm}
  .gem-cut{padding:9px 13px 9px 10px}
}