/* hz-ui.css — единый язык интерактивности разделов aveasy.ru (24.09.2026, DECISIONS.md §0).
   Подключается после CSS страницы. Кликабельное: явное действие + pointer + hover + фокус.
   Переключатели — единая группа, выбранный сегмент тёмный. Перетаскиваемое — ручка ↔ и «Перетащите».
   Статичные метки и показатели кнопками не оформляются. */

/* Сегментированный переключатель */
.hz-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--hz-signal-soft,#FFF0E5);border-radius:8px}
.hz-seg__btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--hz-ink,#121416);
  font:600 13px/1.2 var(--hz-text,'Golos Text',sans-serif);padding:9px 14px;min-height:40px;border-radius:6px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .1s;white-space:nowrap}
.hz-seg__btn:hover{border-color:var(--hz-signal,#FF6A2A)}
.hz-seg__btn:active{transform:translateY(1px)}
.hz-seg__btn[aria-pressed="true"],.hz-seg__btn[aria-selected="true"]{background:var(--hz-panel,#17191C);color:#F4F4F1;border-color:var(--hz-panel,#17191C)}
.hz-seg__btn:focus-visible{outline:3px solid var(--hz-signal,#FF6A2A);outline-offset:2px}
.hz-seg__btn small{display:block;font-weight:400;font-size:11px;opacity:.7;margin-top:2px}
.hz-seg_dark{background:#2A2D31}
.hz-seg_dark .hz-seg__btn{color:#F4F4F1}
.hz-seg_dark .hz-seg__btn[aria-pressed="true"],.hz-seg_dark .hz-seg__btn[aria-selected="true"]{background:var(--hz-signal,#FF6A2A);color:#121416;border-color:var(--hz-signal,#FF6A2A)}
.hz-seg_block{display:flex}.hz-seg_block .hz-seg__btn{flex:1 1 auto;text-align:center}

/* Подсказка-бирка у интерактива */
.hz-hint{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--hz-mono,'JetBrains Mono',monospace);letter-spacing:.04em;
  color:#5B6167;background:#fff;border:1px dashed #C9CBC6;border-radius:999px;padding:6px 10px;white-space:nowrap;vertical-align:middle}
/* Старые страницы (body.hz-ui-golos: главная, кейсы, о нас, производство) — подсказки, бирки и автопоказ на Golos
   (DECISIONS polish-2026-09 §Ш). Новые разделы (/usiliteli/, /analitika/, /obyavleniya/) остаются как приняты Игорем
   23–24.09: моно/системный стек — решение Игоря 24.09 ≈16:00 после сравнения кадров 875c9e9 ↔ HEAD. */
.hz-ui-golos .hz-hint{font:600 12px/1 var(--hz-text,'Golos Text',sans-serif);letter-spacing:0}
/* A1-25/A3-15 (аудит 24.09.2026): глиф декоративный — рядом всегда текстовая подпись
   (см. usages), поэтому альтернативный текст пустой (` / ''`), чтобы не дублировался
   в доступном имени. `\FE0E` — текстовое начертание: без него ☝ рисуется цветным emoji. */
.hz-hint::before{content:'☝\FE0E';content:'☝\FE0E' / '';font-size:13px;line-height:1}
.hz-hint[data-kind="drag"]::before{content:'↔';content:'↔' / ''}
.hz-hint[data-kind="hover"]::before{content:'⌖';content:'⌖' / ''}
.hz-hint[data-kind="auto"]::before{content:'▶';content:'▶' / ''}
.hz-hint_dark{background:#232629;border-color:#4A4E52;color:#C9CCD0}
@media (hover:none){.hz-hint[data-kind="hover"]::before{content:'☝\FE0E';content:'☝\FE0E' / ''}}

/* Карточка-ссылка целиком */
.hz-linkcard{position:relative;display:block;color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.hz-linkcard::after{content:'→';content:'→' / '';position:absolute;right:16px;bottom:14px;font:700 20px/1 var(--hz-display,'Sofia Sans Condensed',sans-serif);
  color:var(--hz-signal,#FF6A2A);transition:transform .15s}
.hz-linkcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(18,20,22,.12);border-color:var(--hz-signal,#FF6A2A)}
.hz-linkcard:hover::after{transform:translateX(4px)}
.hz-linkcard:focus-visible{outline:3px solid var(--hz-signal,#FF6A2A);outline-offset:3px}

/* Ручка шторки/слайдера */
.hz-handle{position:absolute;top:50%;left:var(--cut,50%);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:#fff;color:#121416;box-shadow:0 4px 16px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
  font:700 18px/1 var(--hz-mono,'JetBrains Mono',monospace);cursor:ew-resize;touch-action:none;z-index:3;border:2px solid var(--hz-signal,#FF6A2A)}
.hz-handle::before{content:'↔'}
.hz-handle_label{position:absolute;left:var(--cut,50%);top:calc(50% - 44px);transform:translateX(-50%);white-space:nowrap;
  font:600 11px/1 var(--hz-text,'Golos Text',sans-serif);background:#121416;color:#fff;padding:6px 9px;border-radius:4px;pointer-events:none;z-index:3;
  transition:opacity .3s}
.hz-handle_label::after{content:'';position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:#121416;transform:translateX(-50%) rotate(45deg)}
[data-touched] .hz-handle_label{opacity:0}

/* Рамка «макет» */
.hz-mock{position:relative;background:#fff;color:#1F2226;border:1px solid #DADBD6;border-radius:6px;overflow:hidden;
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.hz-mock__tag{position:absolute;top:8px;right:8px;z-index:2;font:500 10px/1 var(--hz-mono,'JetBrains Mono',monospace);letter-spacing:.06em;
  text-transform:uppercase;color:#5B6167;background:rgba(255,255,255,.92);border:1px solid #DADBD6;border-radius:3px;padding:4px 6px}
/* старые страницы: внутри макета Авито — Golos (замена его Primary Sans, AVITO-REF.md), бирка без капса и моно */
.hz-ui-golos .hz-mock{font-family:'Golos Text',Arial,sans-serif}
.hz-ui-golos .hz-mock__tag{font:500 11px/1 var(--hz-text,'Golos Text',sans-serif);letter-spacing:0;text-transform:none}

/* Индикатор автопоказа */
.hz-autoplay{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--hz-mono,'JetBrains Mono',monospace);color:#5B6167}
.hz-ui-golos .hz-autoplay{font:500 12px/1 var(--hz-text,'Golos Text',sans-serif);font-variant-numeric:tabular-nums}
.hz-autoplay__bar{display:flex;gap:4px;flex:1 1 120px;max-width:220px}
.hz-autoplay__seg{flex:1;height:4px;border-radius:2px;background:#D6D7D2;overflow:hidden;position:relative}
.hz-autoplay__seg[data-done]{background:var(--hz-signal,#FF6A2A)}
.hz-autoplay__seg[data-active]::after{content:'';position:absolute;inset:0;width:calc(var(--progress,0) * 100%);background:var(--hz-signal,#FF6A2A);transition:width .2s linear}
.hz-autoplay__btn{appearance:none;border:1px solid #C9CBC6;background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#121416}
.hz-autoplay__btn:hover{border-color:var(--hz-signal,#FF6A2A)}
.hz-autoplay__btn:focus-visible{outline:3px solid var(--hz-signal,#FF6A2A);outline-offset:2px}
.hz-autoplay_dark{color:#B7BBBF}.hz-autoplay_dark .hz-autoplay__seg{background:#3A3D41}.hz-autoplay_dark .hz-autoplay__btn{background:#232629;border-color:#4A4E52;color:#F4F4F1}
[data-autoplay="paused"] .hz-autoplay__seg[data-active]::after{transition:none}

/* Графики: перекрестие и тултип */
.hz-chart{position:relative;touch-action:pan-y}
.hz-chart svg{display:block;width:100%;height:auto;overflow:visible}
.hz-chart__cross{pointer-events:none;stroke:var(--hz-signal,#FF6A2A);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .12s}
.hz-chart__dot{pointer-events:none;fill:var(--hz-signal,#FF6A2A);stroke:#fff;stroke-width:2;opacity:0}
.hz-chart[data-hover] .hz-chart__cross,.hz-chart[data-hover] .hz-chart__dot{opacity:1}
.hz-tip{position:absolute;z-index:20;pointer-events:none;padding:8px 11px;background:#121416;color:#fff;border-radius:6px;
  font:500 11px/1.5 var(--hz-mono,'JetBrains Mono',monospace);box-shadow:0 6px 24px rgba(0,0,0,.25);white-space:nowrap;opacity:0;transition:opacity .12s}
.hz-tip[data-show]{opacity:1}
.hz-tip b{color:var(--hz-signal,#FF6A2A);font-weight:600}
.hz-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* Раскрытие второстепенного */
.hz-more{border-top:1px solid #DADBD6;margin-top:14px}
.hz-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;font:600 13px/1.2 var(--hz-text,'Golos Text',sans-serif);color:var(--hz-ink,#121416)}
.hz-more>summary::-webkit-details-marker{display:none}
.hz-more>summary::before{content:'+';content:'+' / '';font:700 18px/1 var(--hz-mono,'JetBrains Mono',monospace);color:var(--hz-signal,#FF6A2A);width:18px}
.hz-more[open]>summary::before{content:'−'}
.hz-more>summary:hover{color:var(--hz-signal,#FF6A2A)}
.hz-more>summary:focus-visible{outline:3px solid var(--hz-signal,#FF6A2A);outline-offset:2px;border-radius:4px}
.hz-more>*:not(summary){font-size:13px;line-height:1.55;color:#3B4045;padding:4px 0 12px 26px}
.hz-more_dark{border-color:#3A3D41}.hz-more_dark>summary{color:#F4F4F1}.hz-more_dark>*:not(summary){color:#C9CCD0}

/* Distinct focus on both light and dark surfaces, including orange buttons. */
body.hz :is(.hz-seg__btn,.hz-linkcard,.hz-autoplay__btn,.hz-more>summary):focus-visible{
  outline:3px solid var(--hz-signal-deep);outline-offset:3px;box-shadow:0 0 0 3px var(--hz-white)}
.hz-more:not(.hz-more_dark)>summary:hover{color:var(--hz-signal-deep)}
.hz-seg__btn[aria-pressed="true"],.hz-seg__btn[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--hz-signal)}

/* A2: подписи общих компонентов не мельче 12 px. */
/* Keep content visible if JS/IntersectionObserver is absent. Reveal moves it only. */
@keyframes hz-card-enter{from{translate:0 12px}to{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .hz-revealed{animation:hz-card-enter .38s var(--hz-ease)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hz-linkcard:hover{transform:translateY(-4px);box-shadow:var(--hz-shadow-hover)}
}
.hz-linkcard::after{color:var(--hz-signal-deep)}
.hz-linkcard:hover::after{color:var(--hz-signal-deep)}
.us-sec_panel .hz-linkcard::after,.zm-lv__col_pick.hz-linkcard::after{color:var(--hz-signal)}
.hz-linkcard:focus-visible{background-color:var(--hz-signal-soft)}
.us-sec_panel .hz-linkcard:focus-visible,.zm-lv__col_pick.hz-linkcard:focus-visible{background-color:var(--hz-panel-2)}
.hz-seg__btn small,.hz-handle_label,.hz-mock__tag,.hz-ui-golos .hz-mock__tag,.hz-autoplay,.hz-tip{font-size:12px}
/* Телефон: смысловые и служебные подписи ≥ 12 px. */
@media (max-width:600px){
  .hz-seg__btn small{font-size:12px}
  .hz-handle_label{font-size:12px}
  .hz-mock__tag{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .hz-seg__btn,.hz-linkcard,.hz-linkcard::after,.hz-handle_label,.hz-chart__cross,.hz-tip,.hz-autoplay__seg[data-active]::after{transition:none}
  .hz-seg__btn:active,.hz-linkcard:hover,.hz-linkcard:hover::after{transform:none}
}