/* ==========================================================================
   Индивидуальный заказ. Десктопный кит.

   Листа под эту страницу в ките нет: в `ui_kits/desktop/` её никто не рисовал,
   а `ui_kits/website/custom.html` отменён запиской редакции 1. Поэтому страница
   собрана из общего словаря `kit.css` (.ac-w, .ac-ph, .ac-btn, .ac-f, .ac-fl,
   .ac-fld, .ac-ck, .ac-agree, .ac-send, .ac-panel, .ac-card, .ac-grid), а своим
   здесь стало ровно то, чего в ките нет вовсе: сегмент-контрол, схема кольца,
   таблица и печать.

   Сегмент-контрол сделан по записке компонента `components/forms/
   SegmentedControl.prompt.md`: значения моноширинные, запятая десятичным
   разделителем, недоступное зачёркнуто но остаётся на месте, от двенадцати
   значений - прокрутка на узком экране, рядом ссылка «Как определить размер».

   Главный приём страницы: вид кольца меняется правилами `:has()` от тех же
   переключателей, которые уходят в заявку. Ни одного скрипта для этого нет -
   тот же ход, которым в `product-d.css` сделан выбор варианта изделия.
   ========================================================================== */

/* --- Конструктор ---------------------------------------------------------
   Слева то, что получается, справа то, чем это меняют. Вид липкий: настроек
   восемь групп, и при прокрутке кольцо должно оставаться перед глазами. */

.ac-cf {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--ac-s16);
  align-items: start;
  padding-top: var(--ac-s8);
}

.ac-cf__view {
  position: sticky;
  top: calc(var(--ac-d-hd) + var(--ac-s6));
  display: grid;
  gap: var(--ac-s4);
  padding: var(--ac-s8) var(--ac-s6) var(--ac-s6);
  border-radius: var(--ac-r-card);
  background: var(--ac-surface);
  box-shadow: var(--ac-elev-card);
}

.ac-cf__set { display: grid; gap: var(--ac-s8); }

/* --- Схема кольца --------------------------------------------------------
   Это чертёж, а не фотография, и он таким и выглядит: контур, размерные линии,
   заливка металлом. Рисовать вместо кольца картинку было бы обманом - кольца
   ещё нет, его только собирают. */

.ac-ring {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 168px);
  gap: var(--ac-s4);
  align-items: center;

  /* Значения по умолчанию совпадают с отмеченными переключателями:
     белое золото, шинка 3 мм, один камень. */
  --ac-ring-metal: var(--ac-metal-white);
  --ac-ring-hi: #FFFFFF;
  --ac-ring-lo: #B9B9BD;

  /* --- Единый масштаб --------------------------------------------------
     Семь пикселей в миллиметре, одна линейка на весь чертёж. Без этого
     схема врёт: до пересчёта выбор «шинка 6 мм» раздувал кольцо анфас,
     хотя анфас ширины шинки не видно вовсе - там видна толщина металла.

       толщина металла   1,8 мм постоянно  -> обвод 12,6 px
       радиус обода      размер/2 + 0,9 мм -> 3,5 * размер + 6,3
       высота профиля    внешний диаметр   -> 7 * размер + 25,2
       ширина профиля    ширина шинки      -> 7 * шинка

     Значения по умолчанию - размер 17,5 и шинка 3 мм. */
  --ac-ring-r: 67.55;    /* радиус средней линии обода, вид спереди */
  --ac-ring-ph: 147.7;   /* высота профиля, вид сбоку */
  --ac-ring-pw: 21;      /* ширина профиля, она же ширина шинки */
}

.ac-ring__f { width: 100%; height: auto; overflow: visible; }

/* Обвод постоянный: это толщина металла, 1,8 мм. От ширины шинки она
   не зависит - шинку видно сбоку, а не анфас. Меняется только радиус,
   и меняет его выбранный размер. */
.ac-ring__band {
  fill: none;
  stroke: url(#acMetal);
  stroke-width: 12.6;
  r: calc(var(--ac-ring-r) * 1px);
  transition: r var(--ac-dur) var(--ac-ease);
}

/* Вставка сидит на верхушке обода, а верхушка уезжает вместе с размером.
   Сдвигаем её на ту же разницу, считая от размера по умолчанию. */
/* Камень крупнее нарисованного: на схеме он читается мельче, чем в жизни,
   потому что рядом нет руки для сравнения. Масштабируем группу целиком,
   а не пересчитываем восемь лучей огранки. */
.ac-ring__one,
.ac-ring__path {
  transform-origin: 120px 46px;
  transition: transform var(--ac-dur) var(--ac-ease);
}

/* Камень прижат к ободу: между лапками и металлом не должно быть щели,
   иначе камень висит в воздухе, а не закреплён. */
.ac-ring__one {
  transform: translateY(calc((71.55 - var(--ac-ring-r)) * 1px)) scale(1.14);
}

/* Камни дорожки утоплены в металл на треть: закрепщик сажает их в обод,
   а не кладёт сверху. */
.ac-ring__path {
  transform: translateY(calc((74.55 - var(--ac-ring-r)) * 1px)) scale(1.06);
}

/* --- Язык линий ----------------------------------------------------------
   Весь эскиз нарисован так же, как иконки услуг в спрайте проекта: тонкий
   контур, скруглённые концы, никакой тяжёлой заливки. Толщина взята из
   токена набора, чтобы изделие и иконки на одной странице не спорили. */

.ac-ring__edge {
  fill: none;
  stroke: var(--ac-ink);
  stroke-width: var(--ac-i-w);
  transition: r var(--ac-dur) var(--ac-ease);
}

.ac-ring__edge--out { r: calc((var(--ac-ring-r) + 6.3) * 1px); }
.ac-ring__edge--in  { r: calc((var(--ac-ring-r) - 6.3) * 1px); }

.ac-ring__gem,
.ac-ring__path circle {
  fill: var(--ac-surface);
  stroke: var(--ac-ink);
  stroke-width: var(--ac-i-w);
  stroke-linejoin: round;
}

/* Рундист - поясок камня. Волосяной линией, как грани в знаке мастерской. */
.ac-ring__gird { fill: none; stroke: var(--ac-line-strong); stroke-width: .8; }

/* Площадка и лучи верхних граней. */
.ac-ring__facet {
  fill: none;
  stroke: var(--ac-line-strong);
  stroke-width: .7;
  stroke-linejoin: round;
}

/* Лапки держат камень, поэтому они металл, а не контур. Тоньше прежнего:
   четыре жирных штриха превращали закрепку в подкову. */
.ac-ring__prong {
  fill: none;
  stroke: var(--ac-ring-lo);
  stroke-width: 3.4;
  stroke-linecap: round;
}

/* Вставка появляется по выбору. Скрываем видимость, а не удаляем узел:
   узел остаётся в разметке, и переключение не дёргает вёрстку. */
.ac-ring__one,
.ac-ring__path { visibility: hidden; }

/* --- Формы изделий -------------------------------------------------------
   По умолчанию скрыты все: видимой становится одна, выбранная. */

.ac-sh { visibility: hidden; }

.ac-sh rect,
.ac-sh circle,
.ac-sh path {
  fill: url(#acMetal);
  stroke: var(--ac-ink);
  stroke-width: var(--ac-i-w);
  stroke-linejoin: round;
}

/* Проволока серьги: тело металлом, кромки линией - тот же приём, что у обода
   кольца. Без кромок серьга выглядела наплывом краски, а не изделием.

   Селектор из двух классов намеренно: правило выше задаёт заливку всем
   фигурам внутри `.ac-sh` и по специфичности перебило бы одиночный класс. */
.ac-sh .ac-sh__wire { fill: none; stroke: url(#acMetal); stroke-width: 11; stroke-linecap: round; }

/* Дужка замка уходит вверх, где вертикальный градиент почти белый, и там
   она выцветала до пятна. Красим её плотным тоном металла: в изделии она
   и правда темнее лицевой стороны - на неё не падает свет. */
.ac-sh--ears path.ac-sh__wire { stroke: var(--ac-ring-lo); stroke-width: 9; }
.ac-sh .ac-sh__edge { fill: none; stroke: var(--ac-ink); stroke-width: var(--ac-i-w); }

/* Щиток печатки сидит на шинке, поэтому уезжает вместе с ободом. */
.ac-sh--seal {
  transform: translateY(calc((67.55 - var(--ac-ring-r)) * 1px));
  transition: transform var(--ac-dur) var(--ac-ease);
}

/* Углубление на щитке - место под гравировку или монограмму. */
.ac-sh__in { fill: var(--ac-surface); stroke: var(--ac-line-strong); }

/* Петля подвески - та же проволока, что и серьга, только короткая. */
.ac-sh__eye { fill: none; stroke: url(#acMetal); stroke-width: 7; }

/* --- Чертёж сбоку --------------------------------------------------------
   Размерная линия и профиль шинки. Высота профиля меняется вместе с шириной:
   это геометрическое свойство SVG, и CSS им управляет напрямую. */

.ac-ring__s { width: 100%; height: auto; }

.ac-ring__dim path {
  fill: var(--ac-line-strong);
  stroke: var(--ac-line-strong);
  stroke-width: 1;
}

/* Профиль: ширина - это шинка, высота - внешний диаметр кольца. Обе величины
   в том же масштабе, что и вид спереди, поэтому фигуры рядом сопоставимы. */
.ac-ring__prof {
  fill: url(#acMetal);
  stroke: var(--ac-ink);
  stroke-width: var(--ac-i-w);
  width: calc(var(--ac-ring-pw) * 1px);
  height: calc(var(--ac-ring-ph) * 1px);
  x: calc((120 - var(--ac-ring-pw)) / 2 * 1px);
  y: calc((200 - var(--ac-ring-ph)) / 2 * 1px);
  transition: width var(--ac-dur) var(--ac-ease), height var(--ac-dur) var(--ac-ease),
              x var(--ac-dur) var(--ac-ease), y var(--ac-dur) var(--ac-ease);
}


/* --- Подписи под схемой --------------------------------------------------
   Числа не нарисованы в картинке: они собираются из выбора. Диаметр равен
   размеру, обхват - длине окружности. Поэтому подписи переключаются вместе
   с размером, а не живут отдельной жизнью. */

.ac-ring__num {
  display: flex;
  justify-content: space-between;
  gap: var(--ac-s3);
  padding-top: var(--ac-s3);
  border-top: 1px solid var(--ac-line);
}

.ac-ring__num b { font-weight: var(--ac-w-med); color: var(--ac-ink); }

/* Постоянные чертежа: их не выбирают, но человек должен знать, из чего
   сложена картинка, иначе масштаб выглядит произволом. */
.ac-ring__const { font-size: var(--ac-size-nano); color: var(--ac-ink-mute); }

.ac-cf:has(#w1:checked) .ac-ring__wid b::after { content: "2 мм"; }
.ac-cf:has(#w2:checked) .ac-ring__wid b::after { content: "3 мм"; }
.ac-cf:has(#w3:checked) .ac-ring__wid b::after { content: "4 мм"; }
.ac-cf:has(#w4:checked) .ac-ring__wid b::after { content: "6 мм"; }

.ac-ring__sum {
  font-size: var(--ac-size-sm);
  line-height: var(--ac-lh-body);
  color: var(--ac-ink-body);
  text-wrap: pretty;
}

/* Разделитель ставится перед каждым слагаемым, кроме первого. Это безопасно
   потому, что у всех шести групп есть значение по умолчанию: пустого места,
   перед которым повисла бы запятая, не бывает. */
.ac-ring__sum span + span::before { content: ", "; }

/* --- Сегмент-контрол -----------------------------------------------------
   Переключатель без `<select>`: все значения видны сразу. Правило записки
   компонента - наличие размеров должно читаться с одного взгляда. */

.ac-fs { display: grid; gap: var(--ac-s3); border: 0; padding: 0; margin: 0; }

.ac-fs__l {
  padding: 0;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-size-xs);
  letter-spacing: var(--ac-track-caps);
  text-transform: uppercase;
  color: var(--ac-ink-mute);
}

.ac-seg { display: flex; flex-wrap: wrap; gap: var(--ac-s2); }

.ac-seg__i { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.ac-seg__b {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s2);
  min-height: var(--ac-tap);
  padding: 0 var(--ac-s4);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-r-pill);
  background: var(--ac-surface);
  font-size: var(--ac-size-sm);
  line-height: var(--ac-lh-ui);
  color: var(--ac-ink-body);
  cursor: pointer;
  transition: border-color var(--ac-dur) var(--ac-ease),
              background var(--ac-dur) var(--ac-ease),
              color var(--ac-dur) var(--ac-ease);
}

.ac-seg__b:hover { border-color: var(--ac-line-strong); color: var(--ac-ink); }

/* Отмеченное - утверждение, и красится цветом утверждения: тем же, которым
   красится отмеченная галочка согласия и условие фильтра. */
.ac-seg__i:checked + .ac-seg__b {
  border-color: var(--ac-cta);
  background: var(--ac-cta);
  color: var(--ac-on-ink);
}

.ac-seg__i:focus-visible + .ac-seg__b { outline: 2px solid var(--ac-focus); outline-offset: 2px; }

/* Недоступное значение зачёркнуто, но остаётся на месте: человек должен
   видеть, что размер существует. */
.ac-seg__i:disabled + .ac-seg__b {
  color: var(--ac-ink-mute);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Размеры - язык мастерской, набираются моноширинным с запятой. */
.ac-seg--size .ac-seg__b {
  min-width: 62px;
  justify-content: center;
  padding: 0 var(--ac-s3);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-size-mono);
}

.ac-seg__b--wide { min-width: auto; padding: 0 var(--ac-s4); font-family: var(--ac-font-ui); }

.ac-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--ac-r-pill);
  box-shadow: inset 0 0 0 1px rgba(28, 27, 25, .18);
}

.ac-dot--w { background: linear-gradient(160deg, #FFFFFF, var(--ac-metal-white) 60%, #B9B9BD); }
.ac-dot--y { background: linear-gradient(160deg, #F3E3BC, var(--ac-metal-yellow) 60%, #B2954D); }
.ac-dot--r { background: linear-gradient(160deg, #F0CBB8, var(--ac-metal-red) 60%, #A87259); }

.ac-note--fs { color: var(--ac-ink-mute); }

/* В ките ссылка в тексте ничем не отмечена: `a` только меняет цвет. Там, где
   ссылка стоит внутри примечания, её надо видеть - подчёркиваем по образцу
   согласия и сообщения об отправке, волосяной линией с отбивкой. */
.ac-note a,
.ac-way p a {
  text-decoration: underline;
  text-decoration-color: var(--ac-line-strong);
  text-underline-offset: 3px;
}

.ac-note a:hover { text-decoration-color: var(--ac-ink); }

.ac-cf__go { margin-top: var(--ac-s4); }

/* --- Связь выбора и схемы ------------------------------------------------
   Отсюда и ниже - перечисление правил. Оно длинное намеренно: это цена отказа
   от скрипта, и в этом проекте она уже заплачена на странице изделия, где так
   же перечислены двадцать четыре варианта и двенадцать кадров. */

.ac-cf:has(#m1:checked) .ac-ring { --ac-ring-metal: var(--ac-metal-white);  --ac-ring-hi: #FFFFFF; --ac-ring-lo: #B9B9BD; }
.ac-cf:has(#m2:checked) .ac-ring { --ac-ring-metal: var(--ac-metal-yellow); --ac-ring-hi: #F6E9C8; --ac-ring-lo: #AE9047; }
.ac-cf:has(#m3:checked) .ac-ring { --ac-ring-metal: var(--ac-metal-red);    --ac-ring-hi: #F5D6C6; --ac-ring-lo: #A26D53; }

/* Ширина шинки меняет только профиль: семь пикселей на миллиметр. */
.ac-cf:has(#w1:checked) .ac-ring { --ac-ring-pw: 14; }
.ac-cf:has(#w2:checked) .ac-ring { --ac-ring-pw: 21; }
.ac-cf:has(#w3:checked) .ac-ring { --ac-ring-pw: 28; }
.ac-cf:has(#w4:checked) .ac-ring { --ac-ring-pw: 42; }

.ac-cf:has(#s2:checked) .ac-ring__one  { visibility: visible; }
.ac-cf:has(#s3:checked) .ac-ring__path { visibility: visible; }

/* --- Изделие меняет чертёж ----------------------------------------------
   Кольцо, обручальные и «другое» рисуются гладким ободом - он и так на месте.
   Остальным нужна своя форма. */

.ac-cf:has(#k4:checked) .ac-sh--seal { visibility: visible; }
.ac-cf:has(#k5:checked) .ac-sh--ears { visibility: visible; }
.ac-cf:has(#k6:checked) .ac-sh--pend { visibility: visible; }

/* Помолвочное кольцо - то же кольцо, но камень в нём главный. Увеличиваем
   вставку, а не рисуем вторую: закрепка та же, крупнее только камень. */
.ac-cf:has(#k3:checked) .ac-ring__one {
  transform: translateY(calc((71.55 - var(--ac-ring-r)) * 1px)) scale(1.5);
  transform-origin: 120px 46px;
}

/* На печатке вместо камня щиток: показывать одновременно оба нельзя. */
.ac-cf:has(#k4:checked) .ac-ring__one,
.ac-cf:has(#k4:checked) .ac-ring__path { visibility: hidden; }

/* У серёг и подвески кольца нет вовсе. Убираем обод, вставку и профиль -
   профиль кольца рядом с серьгой означал бы то, чего не будет в изделии. */
.ac-cf:has(#k5:checked) .ac-ring__band,
.ac-cf:has(#k6:checked) .ac-ring__band,
.ac-cf:has(#k5:checked) .ac-ring__edge,
.ac-cf:has(#k6:checked) .ac-ring__edge,
.ac-cf:has(#k5:checked) .ac-ring__one,
.ac-cf:has(#k6:checked) .ac-ring__one,
.ac-cf:has(#k5:checked) .ac-ring__path,
.ac-cf:has(#k6:checked) .ac-ring__path { visibility: hidden; }

.ac-cf:has(#k5:checked) .ac-ring__s,
.ac-cf:has(#k6:checked) .ac-ring__s { display: none; }

.ac-cf:has(#k5:checked) .ac-ring,
.ac-cf:has(#k6:checked) .ac-ring { grid-template-columns: minmax(0, 1fr); }

/* Сводка не должна называть то, чего в изделии нет. У серьги нет шинки,
   на печатке вместо камня щиток - в первом заходе сводка честно писала
   «Серьги, шинка 3 мм», и это была ровно та же неправда, что подпись
   диаметра шириной шинки. */
.ac-cf:has(#k5:checked) .ac-sum__width,
.ac-cf:has(#k6:checked) .ac-sum__width,
.ac-cf:has(#k4:checked) .ac-sum__stone,
.ac-cf:has(#k5:checked) .ac-sum__stone { display: none; }

/* Масштабная подпись относится к чертежу кольца; там, где кольца нет,
   она бессмысленна и уходит вместе с числами. */
.ac-cf:has(#k5:checked) .ac-ring__const,
.ac-cf:has(#k6:checked) .ac-ring__const,
.ac-cf:has(#k7:checked) .ac-ring__const { display: none; }

/* Якоря внутри страницы: липкая шапка перекрывает заголовок, если о ней
   не сказать. Тот же приём, что в `doc-d.css` у заголовков документа. */
#how, #work, #price, #done, #size { scroll-margin-top: calc(var(--ac-d-hd) + var(--ac-s6)); }

/* Матовая поверхность - без градиента: плоский тон и есть матовость. */
.ac-cf:has(#f2:checked) .ac-ring__band { stroke: var(--ac-ring-metal); }
.ac-cf:has(#f2:checked) .ac-ring__prof { fill: var(--ac-ring-metal); }

/* Смешанная: шинка полированная, профиль матовый - так её и делают. */
.ac-cf:has(#f3:checked) .ac-ring__prof { fill: var(--ac-ring-metal); }

/* Сводка словами. Значения подставляются здесь, а не в разметке: в разметке
   они уже есть в атрибутах value переключателей, и дублировать их текстом
   значило бы завести второе место правды. */
.ac-cf:has(#k1:checked) .ac-sum__kind::after { content: "Кольцо"; }
.ac-cf:has(#k2:checked) .ac-sum__kind::after { content: "Обручальные кольца"; }
.ac-cf:has(#k3:checked) .ac-sum__kind::after { content: "Помолвочное кольцо"; }
.ac-cf:has(#k4:checked) .ac-sum__kind::after { content: "Печатка"; }
.ac-cf:has(#k5:checked) .ac-sum__kind::after { content: "Серьги"; }
.ac-cf:has(#k6:checked) .ac-sum__kind::after { content: "Подвеска"; }
.ac-cf:has(#k7:checked) .ac-sum__kind::after { content: "Изделие по эскизу"; }

.ac-cf:has(#m1:checked) .ac-sum__metal::after { content: "белое золото"; }
.ac-cf:has(#m2:checked) .ac-sum__metal::after { content: "жёлтое золото"; }
.ac-cf:has(#m3:checked) .ac-sum__metal::after { content: "красное золото"; }

.ac-cf:has(#p1:checked) .ac-sum__proba::after { content: "585 проба"; }
.ac-cf:has(#p2:checked) .ac-sum__proba::after { content: "750 проба"; }

.ac-cf:has(#w1:checked) .ac-sum__width::after { content: "шинка 2 мм"; }
.ac-cf:has(#w2:checked) .ac-sum__width::after { content: "шинка 3 мм"; }
.ac-cf:has(#w3:checked) .ac-sum__width::after { content: "шинка 4 мм"; }
.ac-cf:has(#w4:checked) .ac-sum__width::after { content: "шинка 6 мм"; }

.ac-cf:has(#s1:checked) .ac-sum__stone::after { content: "без вставки"; }
.ac-cf:has(#s2:checked) .ac-sum__stone::after { content: "один камень"; }
.ac-cf:has(#s3:checked) .ac-sum__stone::after { content: "дорожка камней"; }

.ac-cf:has(#f1:checked) .ac-sum__finish::after { content: "полировка"; }
.ac-cf:has(#f2:checked) .ac-sum__finish::after { content: "матовая"; }
.ac-cf:has(#f3:checked) .ac-sum__finish::after { content: "полировка и матовая вставка"; }

/* Диаметр и обхват. Обхват посчитан как пи на диаметр и округлён до десятой -
   те же числа, что в таблице ниже и в скрипте подбора. Одно место правды на
   три представления было бы лучше, но CSS считать не умеет; поэтому числа
   выверены разом и правятся разом. */
/* Размер меняет не подпись, а сам чертёж: радиус обода и высоту профиля.
   Числа посчитаны по формулам выше и потому сходятся с таблицей размеров. */
.ac-cf:has(#z15:checked)   .ac-ring { --ac-ring-r: 58.8;  --ac-ring-ph: 130.2; }
.ac-cf:has(#z15_5:checked) .ac-ring { --ac-ring-r: 60.55; --ac-ring-ph: 133.7; }
.ac-cf:has(#z16:checked)   .ac-ring { --ac-ring-r: 62.3;  --ac-ring-ph: 137.2; }
.ac-cf:has(#z16_5:checked) .ac-ring { --ac-ring-r: 64.05; --ac-ring-ph: 140.7; }
.ac-cf:has(#z17:checked)   .ac-ring { --ac-ring-r: 65.8;  --ac-ring-ph: 144.2; }
.ac-cf:has(#z17_5:checked) .ac-ring { --ac-ring-r: 67.55; --ac-ring-ph: 147.7; }
.ac-cf:has(#z18:checked)   .ac-ring { --ac-ring-r: 69.3;  --ac-ring-ph: 151.2; }
.ac-cf:has(#z18_5:checked) .ac-ring { --ac-ring-r: 71.05; --ac-ring-ph: 154.7; }
.ac-cf:has(#z19:checked)   .ac-ring { --ac-ring-r: 72.8;  --ac-ring-ph: 158.2; }
.ac-cf:has(#z19_5:checked) .ac-ring { --ac-ring-r: 74.55; --ac-ring-ph: 161.7; }
.ac-cf:has(#z20:checked)   .ac-ring { --ac-ring-r: 76.3;  --ac-ring-ph: 165.2; }
.ac-cf:has(#z20_5:checked) .ac-ring { --ac-ring-r: 78.05; --ac-ring-ph: 168.7; }
.ac-cf:has(#z21:checked)   .ac-ring { --ac-ring-r: 79.8;  --ac-ring-ph: 172.2; }
.ac-cf:has(#z21_5:checked) .ac-ring { --ac-ring-r: 81.55; --ac-ring-ph: 175.7; }
.ac-cf:has(#z22:checked)   .ac-ring { --ac-ring-r: 83.3;  --ac-ring-ph: 179.2; }
.ac-cf:has(#z22_5:checked) .ac-ring { --ac-ring-r: 85.05; --ac-ring-ph: 182.7; }
.ac-cf:has(#z23:checked)   .ac-ring { --ac-ring-r: 86.8;  --ac-ring-ph: 186.2; }

.ac-cf:has(#z15:checked)   .ac-ring__dia b::after { content: "15 мм"; }
.ac-cf:has(#z15:checked)   .ac-ring__len b::after { content: "47,1 мм"; }
.ac-cf:has(#z15_5:checked) .ac-ring__dia b::after { content: "15,5 мм"; }
.ac-cf:has(#z15_5:checked) .ac-ring__len b::after { content: "48,7 мм"; }
.ac-cf:has(#z16:checked)   .ac-ring__dia b::after { content: "16 мм"; }
.ac-cf:has(#z16:checked)   .ac-ring__len b::after { content: "50,3 мм"; }
.ac-cf:has(#z16_5:checked) .ac-ring__dia b::after { content: "16,5 мм"; }
.ac-cf:has(#z16_5:checked) .ac-ring__len b::after { content: "51,8 мм"; }
.ac-cf:has(#z17:checked)   .ac-ring__dia b::after { content: "17 мм"; }
.ac-cf:has(#z17:checked)   .ac-ring__len b::after { content: "53,4 мм"; }
.ac-cf:has(#z17_5:checked) .ac-ring__dia b::after { content: "17,5 мм"; }
.ac-cf:has(#z17_5:checked) .ac-ring__len b::after { content: "55 мм"; }
.ac-cf:has(#z18:checked)   .ac-ring__dia b::after { content: "18 мм"; }
.ac-cf:has(#z18:checked)   .ac-ring__len b::after { content: "56,5 мм"; }
.ac-cf:has(#z18_5:checked) .ac-ring__dia b::after { content: "18,5 мм"; }
.ac-cf:has(#z18_5:checked) .ac-ring__len b::after { content: "58,1 мм"; }
.ac-cf:has(#z19:checked)   .ac-ring__dia b::after { content: "19 мм"; }
.ac-cf:has(#z19:checked)   .ac-ring__len b::after { content: "59,7 мм"; }
.ac-cf:has(#z19_5:checked) .ac-ring__dia b::after { content: "19,5 мм"; }
.ac-cf:has(#z19_5:checked) .ac-ring__len b::after { content: "61,3 мм"; }
.ac-cf:has(#z20:checked)   .ac-ring__dia b::after { content: "20 мм"; }
.ac-cf:has(#z20:checked)   .ac-ring__len b::after { content: "62,8 мм"; }
.ac-cf:has(#z20_5:checked) .ac-ring__dia b::after { content: "20,5 мм"; }
.ac-cf:has(#z20_5:checked) .ac-ring__len b::after { content: "64,4 мм"; }
.ac-cf:has(#z21:checked)   .ac-ring__dia b::after { content: "21 мм"; }
.ac-cf:has(#z21:checked)   .ac-ring__len b::after { content: "66 мм"; }
.ac-cf:has(#z21_5:checked) .ac-ring__dia b::after { content: "21,5 мм"; }
.ac-cf:has(#z21_5:checked) .ac-ring__len b::after { content: "67,5 мм"; }
.ac-cf:has(#z22:checked)   .ac-ring__dia b::after { content: "22 мм"; }
.ac-cf:has(#z22:checked)   .ac-ring__len b::after { content: "69,1 мм"; }
.ac-cf:has(#z22_5:checked) .ac-ring__dia b::after { content: "22,5 мм"; }
.ac-cf:has(#z22_5:checked) .ac-ring__len b::after { content: "70,7 мм"; }
.ac-cf:has(#z23:checked)   .ac-ring__dia b::after { content: "23 мм"; }
.ac-cf:has(#z23:checked)   .ac-ring__len b::after { content: "72,3 мм"; }

/* Размер не выбран - честно говорим об этом, а не показываем чужое число. */
.ac-cf:has(#z0:checked) .ac-ring__dia b::after { content: "измерим при встрече"; }
.ac-cf:has(#z0:checked) .ac-ring__len b::after { content: "-"; }

/* Изделие не кольцо - размер к нему не относится, и подписи уходят целиком. */
.ac-cf:has(#k5:checked) .ac-ring__num,
.ac-cf:has(#k6:checked) .ac-ring__num,
.ac-cf:has(#k7:checked) .ac-ring__num,
.ac-cf:has(#k5:checked) #size,
.ac-cf:has(#k6:checked) #size,
.ac-cf:has(#k7:checked) #size { display: none; }

/* --- Три способа узнать размер ------------------------------------------- */

.ac-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ac-s6);
}

.ac-way { display: grid; gap: var(--ac-s2); padding-top: var(--ac-s4); border-top: 1px solid var(--ac-ink); }

.ac-way__n {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-size-mono);
  font-weight: var(--ac-w-reg);
  color: var(--ac-ink-mute);
}

.ac-way p { font-size: var(--ac-size-sm); line-height: var(--ac-lh-body); color: var(--ac-ink-body); text-wrap: pretty; }

/* --- Подбор по замеру ---------------------------------------------------- */

.ac-size {
  display: grid;
  gap: var(--ac-s3);
  margin-top: var(--ac-s8);
  padding: var(--ac-s6);
  border-radius: var(--ac-r-card);
  background: var(--ac-surface);
  box-shadow: var(--ac-elev-card);
}

.ac-size__in { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--ac-s4); align-items: end; }
.ac-size__f { max-width: 200px; }

.ac-size__out {
  min-height: 24px;
  font-family: var(--ac-font-display);
  font-size: var(--ac-size-h3);
  font-weight: var(--ac-w-semi);
  color: var(--ac-ink);
}

.ac-size__out--no { font-family: var(--ac-font-ui); font-size: var(--ac-size-sm); font-weight: var(--ac-w-reg); color: var(--ac-act-del); }

/* --- Таблица размеров ----------------------------------------------------
   Таблиц в ките нет ни одной, поэтому правила заведены здесь по духу токенов:
   волосяные линии, моноширинные цифры, никакой заливки строк. */

.ac-tbl {
  width: 100%;
  margin-top: var(--ac-s8);
  border-collapse: collapse;
  font-size: var(--ac-size-sm);
}

.ac-tbl caption {
  margin-bottom: var(--ac-s3);
  font-size: var(--ac-size-sm);
  color: var(--ac-ink-mute);
  text-align: left;
}

.ac-tbl th,
.ac-tbl td { padding: 10px var(--ac-s4); border-bottom: 1px solid var(--ac-line); text-align: left; }

.ac-tbl thead th {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-size-xs);
  font-weight: var(--ac-w-reg);
  letter-spacing: var(--ac-track-caps);
  text-transform: uppercase;
  color: var(--ac-ink-mute);
  border-bottom-color: var(--ac-ink);
}

.ac-tbl tbody th { font-family: var(--ac-font-mono); font-weight: var(--ac-w-med); color: var(--ac-ink); }
.ac-tbl td { font-family: var(--ac-font-mono); color: var(--ac-ink-body); }
.ac-tbl__mid th, .ac-tbl__mid td { background: var(--ac-surface-sel); }

/* --- Ход работы ----------------------------------------------------------
   Шесть шагов с линией, которая заполняется по мере прокрутки. Заполнение -
   украшение, и оно взято в @supports: там, где анимации по прокрутке нет,
   линия просто стоит на месте, и ни один шаг от этого не пропадает. */

.ac-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ac-s8) var(--ac-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-flow li { display: grid; gap: var(--ac-s2); padding-top: var(--ac-s4); border-top: 1px solid var(--ac-line); }

.ac-flow b {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-size-mono);
  font-weight: var(--ac-w-reg);
  color: var(--ac-ink-mute);
}

.ac-flow p { font-size: var(--ac-size-sm); line-height: var(--ac-lh-body); color: var(--ac-ink-body); text-wrap: pretty; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ac-flow li {
      border-top-color: var(--ac-line);
      animation: ac-flow-line linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
    @keyframes ac-flow-line {
      from { border-top-color: var(--ac-line); }
      to   { border-top-color: var(--ac-ink); }
    }
  }
}

/* --- Цена и своё золото --------------------------------------------------- */

.ac-cost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-s6); }
.ac-cost article { display: grid; gap: var(--ac-s2); padding-top: var(--ac-s4); border-top: 1px solid var(--ac-ink); }
.ac-cost p { font-size: var(--ac-size-sm); line-height: var(--ac-lh-body); color: var(--ac-ink-body); text-wrap: pretty; }

.ac-gold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ac-s8);
  align-items: center;
  margin-top: var(--ac-s10);
  padding: var(--ac-s8);
  border-radius: var(--ac-r-card);
  background: var(--ac-surface);
  box-shadow: var(--ac-elev-card);
}

.ac-gold h3 { margin-bottom: var(--ac-s2); }

/* --- Короткие ответы -----------------------------------------------------
   Те же `details`, что на странице вопросов: класс там свой, файл сюда не
   подключается, поэтому правила повторены здесь. */

.ac-qs { display: grid; }

.ac-q { border-bottom: 1px solid var(--ac-line); }

.ac-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-s4);
  padding: var(--ac-s5) 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-size-h3);
  font-weight: var(--ac-w-semi);
  color: var(--ac-ink);
  cursor: pointer;
  list-style: none;
}

.ac-q summary::-webkit-details-marker { display: none; }

.ac-q summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 1.4px solid var(--ac-line-strong);
  border-bottom: 1.4px solid var(--ac-line-strong);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ac-dur) var(--ac-ease);
}

.ac-q[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.ac-q p {
  max-width: 58em;
  padding-bottom: var(--ac-s5);
  font-size: var(--ac-size-sm);
  line-height: var(--ac-lh-body);
  color: var(--ac-ink-body);
  text-wrap: pretty;
}

/* --- Узкие ширины --------------------------------------------------------
   Кит держит промежуток 768-1199 отдельным файлом, но своих классов у него
   про эту страницу нет: здесь она и сжимается. */

@media (max-width: 1199px) {
  .ac-cf { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }
  .ac-cf__view { position: static; }
  .ac-ring { grid-template-columns: minmax(0, 1fr) minmax(0, 200px); }
}

@media (max-width: 900px) {
  .ac-how,
  .ac-cost { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s5); }
  .ac-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-size__in { grid-template-columns: minmax(0, 1fr); }
  .ac-gold { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s5); }
}

@media (max-width: 620px) {
  .ac-flow { grid-template-columns: minmax(0, 1fr); }
  .ac-ring { grid-template-columns: minmax(0, 1fr); }
  .ac-ring__s { max-width: 260px; }

  /* Правило записки компонента: от двенадцати значений - прокрутка.
     Восемнадцать размеров в столбик занимают экран целиком. */
  .ac-seg--size {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--ac-s2);
    scrollbar-width: none;
  }
  .ac-seg--size::-webkit-scrollbar { display: none; }
  .ac-seg--size .ac-seg__b { flex: 0 0 auto; }

  .ac-tbl th,
  .ac-tbl td { padding: 9px var(--ac-s2); }
}

/* --- Печать --------------------------------------------------------------
   Таблицу обещано напечатать на одном листе и взять с собой к линейке,
   поэтому печать здесь не формальность: с листа меряют. Всё остальное
   на бумаге бесполезно и уходит. */

@media print {
  .ac-hd, .ac-ft, .ac-veil, .ac-cook,
  .ac-cf, .ac-size, .ac-flow, .ac-cost, .ac-gold,
  .ac-crumb, .ac-grid, .ac-qs, .ac-how { display: none !important; }

  .ac-sec { padding-top: 0; }

  .ac-tbl { margin-top: 12pt; font-size: 11pt; }
  .ac-tbl caption { font-size: 10pt; color: #000; }
  .ac-tbl th, .ac-tbl td { padding: 4pt 6pt; border-bottom: .5pt solid #999; }
  .ac-tbl__mid th, .ac-tbl__mid td { background: transparent; font-weight: 700; }

  @page { margin: 14mm; }
}