/* Демонстрация «Школьный звонок ПРО» (demo.js, data-demo="full"). Все классы с префиксом zv-, цвета — как в программе. */
.zv-demo {
  --zv-blue: var(--blue, #1565C0); --zv-green: var(--green, #2E7D32); --zv-red: var(--red, #C62828); --zv-dred: #8E0000;
  --zv-purple: var(--purple, #6A1B9A); --zv-orange: var(--orange, #E65100); --zv-yellow: #F9A825;
  --zv-ink: var(--ink, #17202A); --zv-ink2: var(--ink-2, #44515E); --zv-ink3: var(--ink-3, #6B7785); --zv-line: var(--line, #DDE3EA);
  --zv-ok: #2A9A55; --zv-win: #F7F7F7;
  font-family: var(--font, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
  color: var(--zv-ink); background: var(--bg-2, #F5F7FA); border: 1px solid var(--zv-line); border-radius: var(--radius, 14px);
  padding: 16px; font-size: 15px; line-height: 1.4; max-width: 100%; overflow: hidden;
}
.zv-demo *, .zv-demo *::before, .zv-demo *::after { box-sizing: border-box; }
.zv-demo button { font-family: inherit; line-height: 1.25; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zv-demo button:focus-visible { outline: 3px solid #FFB300; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(23, 32, 42, .55); }
.zv-demo p { margin: 0; }

/* подпись «это демонстрация» */
.zv-note { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px !important; font-size: 13px; color: var(--zv-ink2); }
.zv-note i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--zv-ink3); color: var(--zv-ink3);
  font: italic 700 11px/15px Georgia, serif; text-align: center; }

/* окна программы */
.zv-stage { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zv-stack .zv-stage { grid-template-columns: minmax(0, 1fr); }
.zv-stack .zv-pult { max-width: 480px; width: 100%; justify-self: center; }
.zv-win { background: var(--zv-win); border: 1px solid #C9D1DA; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 38, 64, .10); min-width: 0; }
.zv-titlebar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; background: #fff; color: #6B7785;
  font-size: 12px; border-bottom: 1px solid #E3E7EC; white-space: nowrap; overflow: hidden; }
.zv-titlebar i { width: 10px; height: 10px; border-radius: 2px; background: var(--zv-blue); flex: none; }
.zv-titlebar span { margin-left: auto; letter-spacing: 6px; color: #444; }
.zv-head { display: flex; align-items: center; gap: 6px 12px; padding: 8px 14px; }
.zv-clock b { display: block; font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.zv-clock span, .zv-next { font-size: 12.5px; color: var(--zv-ink2); }
.zv-now { flex: 1 1 220px; min-width: 0; }
.zv-now b { display: block; font-size: 16px; }
.zv-next { display: block; }
.zv-okl { flex: 0 0 104px; font-size: 12px; color: var(--zv-ok); align-self: flex-start; }
.zv-ff { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 99px; background: var(--zv-yellow); color: var(--zv-ink); font-weight: 700; }
.zv-ff[hidden] { display: none; }

/* полоса состояния */
.zv-band { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: #fff; background: var(--zv-green); min-height: 62px; transition: background .2s; }
.zv-band > div { flex: 1; min-width: 0; }
.zv-bt { display: block; font-size: 21px; font-weight: 800; letter-spacing: .01em; line-height: 1.2; }
.zv-bs { display: block; font-size: 13.5px; margin-top: 3px; }
.zv-band[data-c="blue"] { background: var(--zv-blue); }
.zv-band[data-c="red"] { background: var(--zv-red); }
.zv-band[data-c="darkred"] { background: var(--zv-dred); }
.zv-band[data-c="yellow"] { background: var(--zv-yellow); color: var(--zv-ink); }
.zv-band.zv-blink { animation: zv-blink 1s steps(1) infinite; }
.zv-band[data-c="darkred"].zv-blink { animation-name: zv-blink2; }
@keyframes zv-blink { 50% { background: var(--zv-dred); } }
@keyframes zv-blink2 { 50% { background: var(--zv-red); } }
.zv-bb { flex: none; background: #fff; border: 0; border-radius: 4px; padding: 9px 14px; font-weight: 700; font-size: 14px; color: var(--zv-blue); }
.zv-band[data-c="red"] .zv-bb { color: var(--zv-red); }
.zv-bb[hidden] { display: none; }
.zv-aoff[hidden] { display: block; visibility: hidden; }   /* место под кнопку — высота не прыгает */
.zv-wave { display: none; align-items: center; gap: 3px; height: 30px; flex: none; }
.zv-ringing .zv-wave { display: flex; }
.zv-wave i { width: 4px; height: 100%; border-radius: 2px; background: #fff; transform: scaleY(.3); animation: zv-wave .9s ease-in-out infinite; }
.zv-wave i:nth-child(2) { animation-delay: -.7s; } .zv-wave i:nth-child(3) { animation-delay: -.45s; }
.zv-wave i:nth-child(4) { animation-delay: -.2s; } .zv-wave i:nth-child(5) { animation-delay: -.55s; }
@keyframes zv-wave { 50% { transform: scaleY(1); } }

/* кнопки тревоги: удержание 1,5 с — заполнение слева направо */
.zv-arow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 7px 14px 4px; border-bottom: 1px solid #E3E7EC; }
.zv-arow > b { order: -2; } .zv-arow > span { order: -1; }
.zv-abtns, .zv-arow .zv-hh { flex-basis: 100%; }
.zv-small { display: block; font-size: 11.5px; color: var(--zv-ink2); }
.zv-abtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 5px 0 4px; }
.zv-ab { position: relative; overflow: hidden; border: 0; border-radius: 4px; color: #fff; font-weight: 800; text-transform: uppercase;
  font-size: 12.5px; letter-spacing: .02em; padding: 10px 6px; line-height: 1.2; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.zv-ab::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .42); transform: scaleX(var(--zv-p, 0)); transform-origin: left; pointer-events: none; }
.zv-ab-air { background: var(--zv-red); } .zv-ab-lock { background: var(--zv-purple); } .zv-ab-evac { background: var(--zv-orange); }
.zv-ab.zv-holding { outline: 3px solid var(--zv-ink); outline-offset: 2px; }
.zv-ab:disabled { background: #BDBDBD; cursor: default; }
.zv-hh { min-height: 1.3em; font-size: 12.5px; font-weight: 600; color: var(--zv-red); }
.zv-tbox { padding: 6px 14px 10px; }
.zv-th { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.zv-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid #E3E7EC; table-layout: fixed; }
.zv-table th { background: #F0F2F5; font-weight: 600; padding: 3px 6px; border-right: 1px solid #E3E7EC; }
.zv-table th:nth-child(1), .zv-table td:nth-child(1) { width: 15%; text-align: center; }
.zv-table th:nth-child(2) { width: 17%; } .zv-table th:nth-child(4) { width: 30%; }
.zv-table td { padding: 3px 6px; height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zv-table td:nth-child(4) { text-align: center; }
.zv-table tr.zv-r-ok td { color: var(--zv-ok); }
.zv-table tr.zv-r-next td { background: #E8F0FB; }
.zv-table tr.zv-r-pending td { color: var(--zv-orange); font-weight: 700; }
.zv-table tr.zv-r-error td { color: var(--zv-red); font-weight: 700; }
.zv-table tr.zv-r-ring td { background: #E8F5E9; font-weight: 700; }

/* пульт */
.zv-phead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; font-size: 16px; }
.zv-link { color: var(--zv-green); font-weight: 700; font-size: 14px; white-space: nowrap; }
.zv-link i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--zv-green); margin-right: 6px; vertical-align: -1px; }
.zv-pbody { padding: 10px 14px 12px; }
.zv-talk { display: block; width: 100%; min-height: 54px; border: 0; color: #fff; background: var(--zv-blue); font-size: 22px; font-weight: 800; letter-spacing: .02em; transition: background .2s; }
.zv-talk[data-c="red"] { background: var(--zv-red); }
.zv-talk[data-c="yellow"] { background: var(--zv-yellow); color: var(--zv-ink); }
.zv-phint { font-size: 12.5px; color: var(--zv-ink2); margin: 5px 0 6px; }
.zv-mic { height: 10px; background: #E0E0E0; }
.zv-mic i { display: block; height: 100%; width: 0; background: var(--zv-green); transition: width .1s; }
.zv-mic-t { min-height: 1.4em; font-size: 13px; font-weight: 700; color: var(--zv-green); margin-top: 3px; }
.zv-afs { border: 1px solid #DCDCDC; border-radius: 6px; padding: 4px 12px 8px; margin: 4px 0 0; min-width: 0; }
.zv-afs legend { font-size: 12px; padding: 0 4px; color: var(--zv-ink); }
.zv-afs .zv-ab { display: block; width: 100%; margin: 5px 0; font-size: 13.5px; padding: 8px; }
.zv-aoff { display: block; width: 100%; margin: 4px 0 6px; border: 0; background: var(--zv-red); color: #fff; font-weight: 800; font-size: 14px; padding: 9px 8px; }
.zv-disc { font-size: 11.5px; color: var(--zv-ink3); }

/* схема с панелью сценариев */
.zv-scheme { margin-top: 14px; background: #fff; border: 1px solid var(--zv-line); border-radius: 12px; padding: 12px 16px 12px; }
.zv-shead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.zv-shead > b { font-size: 16px; }
.zv-hint { flex: 1 1 auto; font-size: 13px; color: var(--zv-ink3); }
.zv-tool { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--zv-line); background: #fff; color: var(--zv-ink2);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.zv-tool:hover { border-color: var(--zv-ink3); color: var(--zv-ink); }
.zv-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zv-tool svg path:first-child { fill: currentColor; }
.zv-snd[aria-pressed="true"] .zv-s0, .zv-snd[aria-pressed="false"] .zv-s1 { display: none; }
.zv-auto i { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.zv-auto[aria-pressed="false"] { color: var(--zv-blue); border-color: #B7CDE8; background: #F3F8FD; }
.zv-auto[aria-pressed="false"] i { width: 0; border: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.zv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.zv-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid #C9D3DE; background: #fff; color: var(--zv-ink);
  border-radius: 999px; padding: 8px 16px 8px 13px; font-size: 14.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 38, 64, .08);
  transition: background .15s, border-color .15s, color .15s; }
.zv-tab::before { content: ""; flex: none; width: 0; height: 0; border-left: 9px solid var(--zv-c); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.zv-tab:hover { border-color: var(--zv-c); background: var(--zv-cl); }
.zv-tab:active { transform: translateY(1px); }
.zv-tab[aria-pressed="true"] { background: var(--zv-c); border-color: var(--zv-c); color: #fff; box-shadow: none; }
.zv-tab[aria-pressed="true"]::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; animation: zv-pulse 1.4s ease-in-out infinite; }
@keyframes zv-pulse { 50% { opacity: .35; } }
.zv-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--zv-ink); color: #fff; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 6px; opacity: 0; transition: opacity .15s; z-index: 2; }
.zv-tab:hover .zv-tip, .zv-tab:focus-visible .zv-tip { opacity: 1; }

/* узлы и линии */
.zv-sch { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1.2fr) 44px minmax(0, 1fr);
  grid-template-rows: auto 22px auto; grid-template-areas: "p pp pc pa amp za z" ". . . . fa . ." ". . . . f . ."; }
.zv-nd { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 8px 12px; background: #fff;
  border: 1px solid var(--zv-line); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.zv-nd b { font-size: 15px; line-height: 1.25; }
.zv-nd span { font-size: 12.5px; color: var(--zv-ink3); line-height: 1.3; margin-top: 2px; }
.zv-nd.zv-on { border-color: var(--zv-c); box-shadow: inset 0 0 0 1px var(--zv-c); }
.zv-nd-z.zv-on span { color: var(--zv-c); font-weight: 600; }
.zv-nd-f.zv-on { background: #FFF5F5; }
.zv-nd-f.zv-on b { color: var(--zv-red); }
.zv-nd-p { grid-area: p; } .zv-nd-pc { grid-area: pc; } .zv-nd-amp { grid-area: amp; } .zv-nd-z { grid-area: z; } .zv-nd-f { grid-area: f; }
.zv-ln-pp { grid-area: pp; } .zv-ln-pa { grid-area: pa; } .zv-ln-za { grid-area: za; } .zv-ln-fa { grid-area: fa; }
/* линия: основа 2 px, ::before — стрелка, ::after — бегущая точка. По умолчанию — слева направо */
.zv-ln { position: relative; align-self: center; height: 2px; margin: 0 7px 0 4px; background: #C9D3DE; color: #C9D3DE; transition: background .2s, color .2s; }
.zv-ln::before { content: ""; position: absolute; right: -7px; top: -4px; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.zv-ln::after { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--zv-c); opacity: 0; }
.zv-ln.zv-on { background: var(--zv-c); color: var(--zv-c); }
.zv-ln.zv-on::after { opacity: 1; animation: zv-run 1s linear infinite; }
@keyframes zv-run { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes zv-down { from { top: 0; } to { top: calc(100% - 8px); } }
/* сверху вниз / снизу вверх */
.zv-stack .zv-ln { align-self: stretch; justify-self: center; width: 2px; height: auto; margin: 4px 0 7px; }
.zv-stack .zv-ln::before { right: auto; top: auto; left: -4px; bottom: -7px; border: 0; border-top: 7px solid currentColor; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.zv-stack .zv-ln::after { left: -3px; top: 0; }
.zv-stack .zv-ln.zv-on::after { animation-name: zv-down; }
.zv-ln-fa { align-self: stretch; justify-self: center; width: 2px; height: auto; margin: 7px 0 4px; }
.zv-ln-fa::before { right: auto; left: -4px; top: -7px; border: 0; border-bottom: 7px solid currentColor; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.zv-ln-fa::after { left: -3px; top: 0; }
.zv-ln-fa.zv-on::after { animation: zv-down 1s linear infinite reverse; }
.zv-demo[data-fire="1"] .zv-ln-pa { background: repeating-linear-gradient(90deg, #C9D3DE 0 4px, transparent 4px 8px); }
.zv-demo.zv-stack[data-fire="1"] .zv-ln-pa { background: repeating-linear-gradient(180deg, #C9D3DE 0 4px, transparent 4px 8px); }
/* вертикальная схема (узкий блок): пожарная — справа от СОУЭ, стрелка влево */
.zv-stack .zv-sch { max-width: 520px; margin: 0 auto; grid-template-columns: minmax(0, 1.25fr) 30px minmax(0, 1fr); grid-template-rows: auto 22px auto 22px auto 22px auto;
  grid-template-areas: "p p p" "pp . ." "pc pc pc" "pa . ." "amp fa f" "za . ." "z z z"; }
.zv-stack .zv-ln-fa { align-self: center; justify-self: stretch; width: auto; height: 2px; margin: 0 4px 0 7px; }
.zv-stack .zv-ln-fa::before { left: -7px; top: -4px; bottom: auto; border: 0; border-right: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.zv-stack .zv-ln-fa::after { top: -3px; left: 0; }
.zv-stack .zv-ln-fa.zv-on::after { animation: zv-run 1s linear infinite reverse; }
.zv-stack .zv-nd { min-height: 50px; }

/* строка пояснения и легенда — сразу под схемой */
.zv-demo:not(.zv-stack) .zv-cap { width: calc((100% - 132px) * .476 + 64px); min-height: 66px; margin-top: -66px; }   /* слева от пожарной */
.zv-cap { margin-top: 12px; min-height: 2.9em; padding: 1px 0 1px 12px; border-left: 3px solid var(--zv-c, var(--zv-line)); font-size: 15px; line-height: 1.45; color: var(--zv-ink); }
.zv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 10px !important; padding-top: 9px; border-top: 1px solid #EEF1F4;
  font-size: 12px; color: var(--zv-ink3); }
.zv-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--zv-c); }
.zv-legend em { font-style: normal; }
.zv-press { transform: scale(.97); transition: transform .1s; }
/* цвета событий: звонок, голос, три тревоги, пожарное оповещение СОУЭ (--zv-cl — светлый фон при наведении) */
.zv-demo [data-c="green"] { --zv-c: var(--zv-green); --zv-cl: #EDF7EE; } .zv-demo [data-c="blue"] { --zv-c: var(--zv-blue); --zv-cl: #EEF4FC; }
.zv-demo [data-c="air"] { --zv-c: var(--zv-red); } .zv-demo [data-c="lock"] { --zv-c: var(--zv-purple); }
.zv-demo [data-c="evac"] { --zv-c: var(--zv-orange); --zv-cl: #FFF4EC; } .zv-demo [data-c="fire"] { --zv-c: #C62828; --zv-cl: #FDF0F0; }
.zv-demo [data-c="none"] { --zv-c: var(--zv-line); }

/* узкие экраны (классы ставит demo.js по ширине самой демонстрации) */
.zv-narrow { padding: 10px; }
.zv-narrow .zv-clock b { font-size: 26px; }
.zv-narrow .zv-now b { font-size: 15px; }
.zv-narrow .zv-okl { display: none; }
.zv-narrow .zv-band { flex-wrap: wrap; padding: 10px 12px; min-height: 0; }
.zv-narrow .zv-bt { font-size: 18px; }
.zv-narrow .zv-ab { font-size: 11px; padding: 9px 3px; letter-spacing: 0; }
.zv-narrow .zv-afs .zv-ab { font-size: 14px; }
.zv-narrow .zv-table { font-size: 12px; }
.zv-narrow .zv-table td { padding: 4px 3px; }
.zv-narrow .zv-table td:nth-child(4) { font-size: 10.5px; }
.zv-narrow .zv-table th:nth-child(4) { width: 31%; }
.zv-narrow .zv-scheme { padding: 12px 10px; }
.zv-narrow .zv-shead { gap: 6px; }
.zv-narrow .zv-shead > b { flex: 1 1 auto; }
.zv-narrow .zv-auto { order: 1; }
.zv-narrow .zv-hint { flex-basis: 100%; order: 2; font-size: 12.5px; }
.zv-narrow .zv-tool { font-size: 12px; padding: 4px 9px; gap: 5px; }
.zv-narrow .zv-sch { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
.zv-narrow .zv-nd { padding: 8px 9px; }
.zv-narrow .zv-nd-f b { font-size: 13px; }
.zv-narrow .zv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zv-narrow .zv-tab { justify-content: flex-start; padding: 9px 10px; font-size: 13.5px; line-height: 1.2; text-align: left; }
.zv-narrow .zv-tip { display: none; }
.zv-narrow .zv-nd b { font-size: 14px; }
.zv-narrow .zv-nd span { font-size: 12px; }
.zv-narrow .zv-cap { font-size: 14.5px; }
.zv-narrow .zv-titlebar span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zv-band.zv-blink, .zv-wave i, .zv-tab::before { animation: none !important; }
  .zv-ln.zv-on::after { display: none; }
  .zv-wave i { transform: scaleY(.7); }
  .zv-demo * { transition: none !important; }
}