/* Сезонность: то, чего нет в общем наборе раздела. */

.sn-warn { margin-top: var(--cf-space-14); }
.sn-head #snStat[hidden] { display: none; }
.sn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-8) var(--cf-space-12); }
.sn-head h2 { margin: 0; flex: 1 1 auto; }
.sn-main { min-height: 280px; }

/* Путь внутри года. Цвета серий - как у временных рядов раздела: все годы
   синие, 10 лет бирюзовые пунктиром, текущий год - цвет текста. */
.sn-path__box { position: relative; }
.sn-path svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.sn-path svg:focus { outline: none; }
.sn-path svg:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 4px; border-radius: var(--cf-radius-xs); }
.sn-grid { stroke: var(--cf-line); }
.sn-zero { stroke: var(--cf-line-strong); }
.sn-tick { stroke: var(--cf-line-strong); }
.sn-ax { fill: var(--cf-ink-3); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.sn-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sn-line.sn-l-all { stroke: var(--cf-chart-1); stroke-width: 2.25; }
.sn-line.sn-l-10 { stroke: var(--cf-chart-2); stroke-dasharray: 6 4; }
.sn-line.sn-l-cur { stroke: var(--cf-ink); }
.sn-vline { stroke: var(--cf-ink-3); stroke-dasharray: 3 3; }
.sn-dot { stroke: var(--cf-surface); stroke-width: 2; }
.sn-dot.sn-l-all { fill: var(--cf-chart-1); } .sn-dot.sn-l-10 { fill: var(--cf-chart-2); } .sn-dot.sn-l-cur { fill: var(--cf-ink); }
.sn-legend i.sn-l-all { background: var(--cf-chart-1); }
.sn-legend i.sn-l-10 { background: repeating-linear-gradient(90deg, var(--cf-chart-2) 0 4px, transparent 4px 6px); }
.sn-legend i.sn-l-cur { background: var(--cf-ink); }
.sn-legend small { color: var(--cf-ink-3); font-size: 12px; }
.sn-empty { position: static; min-height: 200px; }

/* Тепловая карта: знак - цвет (зелёный/красный), сила - насыщенность через
   --a на тех же токенах. Своя прокрутка по горизонтали, год липкий. */
.sn-heat-wrap { overflow-x: auto; border-radius: var(--cf-radius-lg); background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line); overscroll-behavior-x: contain; }
.sn-heat-wrap:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.sn-heat { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; padding: var(--cf-space-6); }
.sn-heat th { font-weight: 600; color: var(--cf-ink-3); font-size: 12px; padding: var(--cf-space-6) var(--cf-space-4); text-align: center; }
.sn-heat .sn-y { position: sticky; left: 0; z-index: 1; background: var(--cf-surface); text-align: left; color: var(--cf-ink-2); padding-left: var(--cf-space-8); white-space: nowrap; }
.sn-heat .sn-c { position: relative; text-align: center; padding: var(--cf-space-6) var(--cf-space-4); border-radius: var(--cf-radius-xs); color: var(--cf-ink); white-space: nowrap; }
.sn-heat .sn-c.is-up { background: color-mix(in srgb, var(--cf-up) var(--a, 20%), transparent); }
.sn-heat .sn-c.is-down { background: color-mix(in srgb, var(--cf-down) var(--a, 20%), transparent); }
.sn-heat .sn-c.is-empty { background: var(--cf-surface-2); }
.sn-heat .sn-c.is-partial { box-shadow: inset 0 0 0 1.5px var(--cf-ink-3); }
.sn-heat .sn-t { font-weight: 600; }
.sn-heat thead .sn-t, .sn-heat td.sn-t:empty { background: none; }
.sn-heat tr > .sn-t { border-left: 6px solid var(--cf-surface); }
.sn-heat tfoot th, .sn-heat tfoot td { border-top: 0; }
.sn-heat tfoot tr:first-child > * { padding-top: var(--cf-space-10); }
.sn-heat .sn-up { color: var(--cf-ink-2); background: var(--cf-surface-2); }

@media (max-width: 767px) {
  .sn-heat { font-size: 12px; min-width: 700px; }
}