/* Портрет компании («снежинка»): колонка справа от графика цены.
 * Только токены --cf-*. Форма - синяя линия графика; пройдена проверка или
 * нет - значок и насыщенность текста, без зелёного и красного (светофор
 * запрещён дизайн-системой). Вид - по образцу GuruFocus (.sfg), см. ниже. */

/* ── строка «график + портрет» ─────────────────────────────────────── */
.sf-row { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
.sf-row:not(:has([data-chart])) { grid-template-columns: minmax(0, 1fr); }
/* высоту строки задаёт график: колонка ей не мешает, длинный список проверок
   прокручивается внутри (иначе раскрытая ось растягивала график) */
.sf-row:has([data-chart]) > .sf { height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cf-line-strong) transparent; }

.sf { display: flex; flex-direction: column; gap: var(--cf-space-6); padding: 18px 20px 14px; min-width: 0; }
.sf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cf-space-8); }
.sf-head h2 { margin: 0; font-size: 16px; white-space: nowrap; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.sf-type { margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--cf-ink-2); }

/* ── снежинка: общее ───────────────────────────────────────────────── */
.sf-fig { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.sf-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
/* проверки открыты - снежинка уменьшается, колонка не растёт и не тянет график */
/* проверки открыты - в узкой колонке снежинка уступает место списку,
   «Все оси» возвращает её; на телефоне (одна колонка) она остаётся */
.sf-row:has([data-chart]) > .sf.is-open .sf-fig { display: none; }
.sf-lab { transition: fill var(--cf-dur-fast) ease, opacity var(--cf-dur) ease; }
.sf-spoke { stroke: var(--cf-line); stroke-width: 1; }
.sf-wedge { fill: var(--cf-accent-soft); opacity: 0; transition: opacity var(--cf-dur) ease; pointer-events: none; }
.sf-wedge.is-on { opacity: 1; }
.sf-hit { fill: transparent; cursor: pointer; }
.sf-lab { font-size: 12.5px; font-weight: 500; fill: var(--cf-ink-2); cursor: pointer; transition: fill var(--cf-dur-fast) ease; }
.sf-lab.is-on { fill: var(--cf-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .sf-lab:hover { fill: var(--cf-accent); } }

/* ── вид по образцу GuruFocus, светлый синий ─────────────────────────
 * Выбор Жени 28.09.2026 после сравнения зелёной (как у GF), насыщенной
 * синей и светлой синей палитр. Синий - цвет данных и графиков сайта:
 * снежинка читается заодно с графиком цены, а зелёный на странице акции
 * занят знаком «цена выросла» и звучал бы как оценка «хорошо».
 * В светлой теме синий осветлён, плашка голубая с синей цифрой (белая на
 * светлом синем читалась хуже и выглядела кнопкой). Тёмная - на --cf-chart-1. */
.sf {
  --sf-g: color-mix(in srgb, var(--cf-chart-1) 68%, var(--cf-surface));
  --sf-shape: color-mix(in srgb, var(--cf-chart-1) 30%, var(--cf-surface));
  --sf-shape-op: .8;
  --sf-tag: color-mix(in srgb, var(--cf-chart-1) 16%, var(--cf-surface));
  --sf-tag-ink: var(--cf-accent);
  --sf-tag-edge: var(--sf-g);
  --sf-tag-edge-w: 1.2;
  --sf-b6: color-mix(in srgb, var(--cf-chart-1) 6%, var(--cf-surface));
  --sf-b5: color-mix(in srgb, var(--cf-chart-1) 10%, var(--cf-surface));
  --sf-b4: color-mix(in srgb, var(--cf-chart-1) 14%, var(--cf-surface));
  --sf-b3: color-mix(in srgb, var(--cf-chart-1) 18%, var(--cf-surface));
  --sf-b2: color-mix(in srgb, var(--cf-chart-1) 22%, var(--cf-surface));
  --sf-core: color-mix(in srgb, var(--cf-chart-1) 27%, var(--cf-surface));
}
[data-theme="dark"] .sf {
  --sf-g: var(--cf-chart-1);
  --sf-shape: var(--cf-chart-1);
  --sf-shape-op: .38;
  --sf-tag: var(--cf-chart-1);
  --sf-tag-ink: var(--cf-surface);
  --sf-tag-edge: var(--cf-surface);
  --sf-tag-edge-w: 2;
  --sf-b6: color-mix(in srgb, var(--cf-chart-1) 9%, var(--cf-surface));
  --sf-b5: color-mix(in srgb, var(--cf-chart-1) 11%, var(--cf-surface));
  --sf-b4: color-mix(in srgb, var(--cf-chart-1) 14%, var(--cf-surface));
  --sf-b3: color-mix(in srgb, var(--cf-chart-1) 17%, var(--cf-surface));
  --sf-b2: color-mix(in srgb, var(--cf-chart-1) 21%, var(--cf-surface));
  --sf-core: color-mix(in srgb, var(--cf-chart-1) 26%, var(--cf-surface));
}
.sf-svg { max-width: 300px; }
.sfg-band { stroke: var(--cf-surface); stroke-width: 1.4; }
.sfg-band6 { fill: var(--sf-b6); }
.sfg-band5 { fill: var(--sf-b5); }
.sfg-band4 { fill: var(--sf-b4); }
.sfg-band3 { fill: var(--sf-b3); }
.sfg-band2 { fill: var(--sf-b2); }
.sfg-band1 { fill: var(--sf-core); }
.sfg-spoke { stroke: var(--cf-surface); stroke-width: 1.5; }
.sfg-shape { fill: var(--sf-shape); fill-opacity: var(--sf-shape-op); stroke: var(--sf-g); stroke-width: 2; stroke-linejoin: round; }
.sfg-dot { fill: var(--sf-g); stroke: var(--cf-surface); stroke-width: 1.5; }
.sfg .sf-lab { font-size: 14px; font-weight: 500; fill: var(--cf-ink-2); }
.sfg .sf-lab.is-on { fill: var(--sf-g); font-weight: 600; }
.sfg .sf-wedge { fill: color-mix(in srgb, var(--sf-g) 14%, transparent); }
/* плашка балла на внешнем кольце; обводка цветом фона отделяет её от спиц */
.sfg-tag rect { fill: var(--sf-tag); stroke: var(--sf-tag-edge); stroke-width: var(--sf-tag-edge-w); }
.sfg-tag text { font-size: 12px; font-weight: 700; fill: var(--sf-tag-ink); }
.sfg.has-pick .sfg-dot:not(.is-on), .sfg.has-pick .sfg-tag:not(.is-on) { opacity: .35; }
/* шкалы в строках осей - тем же синим, чтобы строка и снежинка читались как одно */
.sf .sf-meter i.on { background: var(--sf-g); }

.sf-total { flex: 0 0 auto; font-size: 13px; color: var(--cf-ink-3); white-space: nowrap; }
.sf-total b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--cf-ink); }

/* ── оси: обзор ────────────────────────────────────────────────────── */
.sf-view { min-width: 0; }
.sf-axes { list-style: none; margin: 0; padding: 0; }
.sf-axes[hidden] { display: none; }
.sf-axis {
  appearance: none; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 14px; align-items: center; gap: var(--cf-space-10);
  min-height: 28px; padding: 1px var(--cf-space-8); border-radius: var(--cf-radius-sm);
  transition: background-color var(--cf-dur-fast) ease;
}
.sf-axis:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .sf-axis:hover { background: var(--cf-surface-2); } }
.sf-axis.is-on { background: var(--cf-accent-soft); }
.sf-axis-n { font-size: 14px; font-weight: 500; color: var(--cf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-axis-s, .sf-pane-s { font-size: 14px; font-weight: 700; color: var(--cf-ink); text-align: right; white-space: nowrap; }
.sf-axis-s span, .sf-pane-s span { font-weight: 400; color: var(--cf-ink-3); font-size: 12.5px; }
.sf-meter { display: grid; grid-template-columns: repeat(6, 8px); gap: 3px; }
.sf-meter i { height: 8px; border-radius: var(--cf-radius-bar); background: var(--cf-surface-3); }
.sf-meter i.on { background: var(--cf-chart-1); }
.sf-chev { width: 14px; height: 14px; fill: none; stroke: var(--cf-ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── оси: проверки одной оси ───────────────────────────────────────── */
.sf-pane[hidden] { display: none; }
.sf-pane { animation: sf-in 200ms var(--cf-ease) both; }
@keyframes sf-in { from { opacity: 0; transform: translateX(8px); } }
.sf-pane-h { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-8); }
.sf-back {
  appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--cf-space-4);
  min-height: 32px; padding: 0 var(--cf-space-10) 0 var(--cf-space-6); margin-left: calc(-1 * var(--cf-space-6));
  border-radius: var(--cf-radius-pill); font-size: 13px; font-weight: 600; color: var(--cf-accent);
  transition: background-color var(--cf-dur-fast) ease;
}
.sf-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-back:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sf-back:hover { background: var(--cf-accent-soft); } }
.sf-pane-t { margin: var(--cf-space-4) 0 0; font-size: 15px; font-weight: 600; }
.sf-hint { margin: 0 0 var(--cf-space-4); font-size: 12.5px; color: var(--cf-ink-3); }
.sf-list { list-style: none; margin: 0; padding: 0; }
.sf-chk {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--cf-space-8); align-items: start;
  padding: 6px 0; font-size: 13.5px; line-height: 1.4; color: var(--cf-ink);
}
.sf-chk + .sf-chk { border-top: 1px solid var(--cf-line); }
.sf-chk svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-chk[data-ok="1"] svg circle { fill: var(--cf-ink); stroke: var(--cf-ink); }
.sf-chk[data-ok="1"] svg path { stroke: var(--cf-surface); }
.sf-chk[data-ok="0"] { color: var(--cf-ink-2); }
.sf-chk[data-ok="0"] svg, .sf-chk[data-ok="x"] svg { stroke: var(--cf-ink-3); }
.sf-chk[data-ok="x"] { color: var(--cf-ink-3); }

@media (max-width: 1100px) {
  .sf-row { grid-template-columns: minmax(0, 1fr) 320px; }
  .sf-axis { grid-template-columns: minmax(0, 1fr) auto 40px 14px; gap: var(--cf-space-8); }
  .sf-meter { grid-template-columns: repeat(6, 6px); }
}
@media (max-width: 900px) {
  .sf-row { grid-template-columns: minmax(0, 1fr); }
  .sf-row:has([data-chart]) > .sf { height: auto; min-height: 0; overflow: visible; }
  .sf-svg { max-width: 320px; }
  .sf-axis { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-pane { animation: none; }
  .sf-wedge, .sf-lab, .sf-axis, .sf-back { transition: none; }
}

/* кнопка «?» у заголовка и панель «Как считаем» */
.sf-info {
  appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: 1px;
  border: 0; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color var(--cf-dur-fast) ease, color var(--cf-dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .sf-info:hover { background: var(--cf-accent-soft); color: var(--cf-accent); } }
.sf-info[aria-expanded="true"] { background: var(--cf-accent-soft); color: var(--cf-accent); }
.sf-info:active { transform: scale(.94); }
.sf-mlist { list-style: none; margin: 0 0 6px; padding: 0; }
.sf-mlist li { padding: 6px 0; font-size: 13px; line-height: 1.45; color: var(--cf-ink-2); }
.sf-mlist li + li { border-top: 1px solid var(--cf-line); }
.sf-mlist b { font-weight: 600; color: var(--cf-ink); }