/* Оформление инструмента «property-calc».
 *
 * Инструмент собирал разметку с атрибутами style= прямо в js. Ради этого
 * в Content-Security-Policy держали style-src 'unsafe-inline', то есть
 * разрешали любой инлайновый стиль на всех страницах пяти сайтов.
 * Вынесено 27.07.2026.
 *
 * Имена классов служебные и пронумерованы: это перенос один в один, а не
 * новый дизайн. Переименовывать их имеет смысл вместе с правкой самого
 * инструмента, а не отдельным заходом.
 *
 * Подключается partial'ом tools.html только на странице инструмента,
 * с отпечатком содержимого в адресе (asset-url.html).
 */

/* Все правила ниже привязаны к .tool-shell не для красоты: в base.css темы
 * есть `.tool-shell label`, `.tool-shell input`, `.tool-shell button` —
 * селекторы весом 0,1,1. Голый класс (0,1,0) им проигрывает, и label,
 * который должен быть inline-flex, оставался block: инлайновый стиль
 * раньше выигрывал у всего, а класс — нет. Поймано сверкой вычисленных
 * стилей 27.07.2026.
 */

.tool-shell .pc-1 {
  font-size:15px;
  line-height:1.6;
  margin:0 0 18px;
}

.tool-shell .pc-2 {
  border-top:1px solid var(--color-rule);
  padding:14px 0;
}

.tool-shell .pc-3 {
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
}

.tool-shell .pc-4 {
  margin-top:3px;
  width:auto;
}

.tool-shell .pc-5 {
  font-weight:600;
}

.tool-shell .pc-6 {
  display:block;
  font-weight:400;
  font-size:13.5px;
  color:var(--color-muted);
  margin-top:2px;
}

.tool-shell .pc-7 {
  display:none;
  margin:12px 0 0 28px;
}

.tool-shell .pc-8 {
  font-size:14px;
  margin:0 0 8px;
  color:var(--color-muted);
}

.tool-shell .pc-9 {
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-right:18px;
  font-weight:400;
}

.tool-shell .pc-10 {
  width:auto;
  margin:0;
}

.tool-shell .pc-11 {
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-bottom:6px;
  font-weight:400;
}

.tool-shell .pc-12 {
  width:auto;
  margin-top:3px;
}

.tool-shell .pc-13 {
  margin-top:22px;
}

.tool-shell .pc-14 {
  font-size:14px;
  color:var(--color-muted);
}

.tool-shell .pc-15 {
  font-size:14px;
  color:var(--color-muted);
  margin-bottom:12px;
}

.tool-shell .pc-16 {
  /* Цвет полосы приходит из состояния (забирают / зависит / не тронут) и
     ставится в js свойством. Запасной — линейка темы: без него полоса на
     мгновение до отрисовки была бы чёрной. */
  border-left: 3px solid var(--color-rule);
  padding: 2px 0 2px 14px;
  margin-bottom: 18px;
}

.tool-shell .pc-17 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.tool-shell .pc-18 {
  margin-bottom:12px;
}

.tool-shell .pc-19 {
  font-weight:600;
  font-size:15px;
  margin:0;
}

.tool-shell .pc-20 {
  font-size:14px;
  line-height:1.55;
  margin:4px 0 0;
}

.tool-shell .pc-21 {
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--color-muted);
  margin:4px 0 0;
}

.tool-shell .pc-22 {
  font-size:13px;
  line-height:1.6;
  color:var(--color-muted);
  border-top:1px solid var(--color-rule);
  padding-top:12px;
  margin-top:4px;
}