/* Интерактивные модели курса «Безотходное производство». */
.zw-viz {
  --zw-ink: #17362f;
  --zw-green: #337c5c;
  --zw-lime: #86a94c;
  --zw-sand: #d5aa66;
  --zw-rust: #a85f47;
  margin: 30px 0 36px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #d8e0d8;
  border-radius: 22px;
  background: radial-gradient(circle at 96% 0, #dcead9, transparent 35%), linear-gradient(145deg, #fbfbf6, #f0f5ee);
  box-shadow: 0 22px 48px -40px #17362f;
  color: var(--zw-ink);
}
.zw-viz figcaption { display: grid; gap: 6px; margin-bottom: 20px; }
.zw-viz__eyebrow { color: var(--zw-green); font: 700 .72rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.zw-viz__title { font: 600 clamp(1.28rem, 2.5vw, 1.75rem)/1.16 var(--serif); }
.zw-viz__hint { max-width: 66em; color: #60756d; font: 400 .88rem/1.45 var(--sans); }
.zw-viz button, .zw-viz input { font-family: var(--sans); }
.zw-viz button { cursor: pointer; }
.zw-viz button:focus-visible, .zw-viz input:focus-visible { outline: 3px solid #dbb56d; outline-offset: 3px; }
.zw-viz__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.zw-viz__controls label { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #d5dfd7; border-radius: 12px; background: #fff; }
.zw-viz__controls label span { display: flex; justify-content: space-between; gap: 10px; color: #486159; font: 700 .73rem/1.25 var(--sans); }
.zw-viz__controls output { color: var(--zw-green); }
.zw-viz__panel { margin-top: 14px; padding: 17px 19px; border-radius: 14px; background: var(--zw-ink); color: #fff; }
.zw-viz__panel small { color: #bcd1c7; font: 700 .65rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.zw-viz__panel strong { display: block; margin-top: 7px; color: #f1cc85; font: 600 1.12rem/1.2 var(--serif); }
.zw-viz__panel p { margin: 6px 0 0 !important; font: 400 .82rem/1.45 var(--sans) !important; }

/* Полная цена потерь. */
.zw-cost { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: center; }
.zw-cost__stack { display: flex; min-height: 260px; align-items: end; justify-content: center; gap: 9px; padding: 16px; border: 1px solid #d7e0d9; border-radius: 16px; background: #fff; }
.zw-cost__bar { display: flex; width: 54px; flex-direction: column; justify-content: end; color: #5d716a; text-align: center; font: 700 .63rem/1.2 var(--sans); }
.zw-cost__bar i { display: block; height: var(--h); min-height: 8px; margin-top: 7px; border-radius: 7px 7px 2px 2px; background: var(--zw-green); transition: height .2s; }
.zw-cost__bar:nth-child(2) i { background: var(--zw-rust); }
.zw-cost__bar:nth-child(3) i { background: var(--zw-sand); }
.zw-cost__bar:nth-child(4) i { background: #71929a; }
.zw-cost__bar:nth-child(5) i { background: #a8b8a5; }

/* Материальный баланс. */
.zw-balance__flow { display: grid; grid-template-columns: minmax(115px, .8fr) 42px minmax(0, 2fr); gap: 12px; align-items: center; margin-top: 15px; }
.zw-balance__source { padding: 18px 12px; border-radius: 14px; background: var(--zw-ink); color: #fff; text-align: center; }
.zw-balance__source b { display: block; font: 600 1.4rem/1 var(--serif); }
.zw-balance__source span { display: block; margin-top: 6px; font: 600 .67rem/1.2 var(--sans); }
.zw-balance__arrow { color: var(--zw-sand); font: 800 1.8rem/1 var(--serif); text-align: center; }
.zw-balance__outputs { display: grid; gap: 6px; }
.zw-balance__row { display: grid; grid-template-columns: 110px minmax(35px, 1fr) 70px; align-items: center; gap: 8px; font: 600 .7rem/1.2 var(--sans); }
.zw-balance__track { height: 18px; overflow: hidden; border-radius: 99px; background: #dde5df; }
.zw-balance__track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--zw-green); transition: width .2s; }
.zw-balance__row.is-trim i { background: var(--zw-sand); }
.zw-balance__row.is-defect i, .zw-balance__row.is-unaccounted i { background: var(--zw-rust); }

/* Узкое место. */
.zw-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.zw-flow__stage { position: relative; padding: 15px; border: 1px solid #d4dfd7; border-radius: 14px; background: #fff; text-align: center; }
.zw-flow__stage::after { content: '→'; position: absolute; top: 42%; right: -14px; z-index: 2; color: var(--zw-sand); font-weight: 800; }
.zw-flow__stage:last-child::after { display: none; }
.zw-flow__stage.is-limit { border-color: var(--zw-rust); box-shadow: inset 0 0 0 2px var(--zw-rust); }
.zw-flow__stage small { color: #6d817a; font: 700 .65rem/1.2 var(--sans); }
.zw-flow__stage b { display: block; margin-top: 7px; font: 600 1.32rem/1 var(--serif); }
.zw-flow__queue { display: flex; min-height: 20px; justify-content: center; gap: 3px; margin-top: 12px; }
.zw-flow__queue i { width: 9px; height: 17px; border-radius: 4px; background: var(--zw-sand); }

/* Аудит 5С. */
.zw-5s__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.zw-5s__steps button { min-height: 112px; padding: 12px; border: 1px solid #d2ddd5; border-radius: 13px; background: #fff; color: var(--zw-ink); text-align: left; }
.zw-5s__steps button[aria-pressed="true"] { border-color: var(--zw-green); background: #e7f1e9; box-shadow: inset 0 0 0 2px var(--zw-green); }
.zw-5s__steps small { color: var(--zw-green); font: 700 .62rem/1 var(--sans); }
.zw-5s__steps b { display: block; margin-top: 13px; font: 600 .78rem/1.25 var(--sans); }
.zw-5s__meter { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap: 10px; margin-top: 15px; color: #5f746c; font: 700 .68rem/1.2 var(--sans); }
.zw-5s__meter span { height: 12px; overflow: hidden; border-radius: 99px; background: #dce5de; }
.zw-5s__meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--zw-sand), var(--zw-green)); transition: width .2s; }

/* Инвестиции. */
.zw-invest { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.zw-invest__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.zw-invest__card { padding: 17px; border: 1px solid #d2ddd5; border-radius: 14px; background: #fff; }
.zw-invest__card small { color: #657a72; font: 700 .62rem/1.2 var(--sans); text-transform: uppercase; }
.zw-invest__card b { display: block; margin-top: 10px; color: var(--zw-green); font: 600 1.16rem/1.1 var(--serif); }
.zw-invest__card.is-risk b { color: var(--zw-rust); }

/* Матрица ответственности. */
.zw-raci__tasks { display: flex; flex-wrap: wrap; gap: 7px; }
.zw-raci__tasks button, .zw-objections__list button { padding: 9px 12px; border: 1px solid #d1ddd5; border-radius: 999px; background: #fff; color: var(--zw-ink); font-size: .72rem; font-weight: 700; }
.zw-raci__tasks button[aria-pressed="true"], .zw-objections__list button[aria-pressed="true"] { border-color: var(--zw-green); background: var(--zw-green); color: #fff; }
.zw-raci__roles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.zw-raci__role { min-height: 95px; padding: 12px 8px; border: 1px solid #d4dfd7; border-radius: 12px; background: #fff; text-align: center; }
.zw-raci__role i { display: grid; width: 31px; height: 31px; margin: 0 auto 9px; place-items: center; border-radius: 50%; background: #e4ece6; color: var(--zw-green); font: 800 .8rem/1 var(--sans); }
.zw-raci__role.is-owner { border-color: var(--zw-green); background: #eaf3eb; }
.zw-raci__role.is-owner i { background: var(--zw-green); color: #fff; }
.zw-raci__role b { display: block; overflow-wrap: anywhere; font: 600 .66rem/1.25 var(--sans); }

/* Премия из экономии. */
.zw-bonus__split { display: flex; min-height: 96px; overflow: hidden; margin-top: 14px; border-radius: 14px; }
.zw-bonus__split div { display: flex; flex-direction: column; justify-content: center; padding: 14px; color: #fff; transition: flex-basis .2s; }
.zw-bonus__people { flex-basis: 30%; background: var(--zw-green); }
.zw-bonus__next { flex: 1; background: var(--zw-ink); }
.zw-bonus__split b { font: 600 1.08rem/1 var(--serif); }
.zw-bonus__split span { margin-top: 6px; font: 600 .65rem/1.2 var(--sans); }
.zw-bonus__split.is-locked { filter: grayscale(.7); opacity: .7; }

/* Возражения. */
.zw-objections { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 16px; }
.zw-objections__list { display: grid; align-content: start; gap: 7px; }
.zw-objections__list button { border-radius: 12px; text-align: left; }
.zw-objections__answer { display: grid; gap: 9px; }
.zw-objections__answer div { padding: 16px; border: 1px solid #d4dfd7; border-radius: 14px; background: #fff; }
.zw-objections__answer small { color: #687d75; font: 700 .63rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.zw-objections__answer b { display: block; margin-top: 9px; font: 600 .84rem/1.38 var(--sans); }
.zw-objections__answer div:last-child { border-color: #c7dbc9; background: #edf5ed; }

/* Иерархия обращения с отходами. */
.zw-hierarchy { display: grid; gap: 7px; }
.zw-hierarchy button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: calc(100% - var(--indent)); margin-left: var(--indent); padding: 11px 13px; border: 1px solid #d3ded6; border-radius: 11px; background: #fff; color: var(--zw-ink); text-align: left; }
.zw-hierarchy button[aria-pressed="true"] { border-color: var(--zw-green); background: #e9f3ea; box-shadow: inset 0 0 0 2px var(--zw-green); }
.zw-hierarchy button small { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e3ebe4; color: var(--zw-green); font: 800 .68rem/1 var(--sans); }
.zw-hierarchy button b { font: 700 .78rem/1.2 var(--sans); }
.zw-hierarchy button span { color: #6c8179; font: 600 .65rem/1.2 var(--sans); }

/* Панель показателей. */
.zw-dashboard__head { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: end; }
.zw-dashboard__head > label { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #d5dfd7; border-radius: 12px; background: #fff; }
.zw-dashboard__head > label > span { display: flex; justify-content: space-between; gap: 10px; color: #486159; font: 700 .73rem/1.25 var(--sans); }
.zw-dashboard__head output { color: var(--zw-green); }
.zw-dashboard__filter { display: flex; flex-wrap: wrap; gap: 7px; }
.zw-dashboard__filter button { padding: 8px 11px; border: 1px solid #d2ddd5; border-radius: 999px; background: #fff; color: var(--zw-ink); font-size: .7rem; font-weight: 700; }
.zw-dashboard__filter button[aria-pressed="true"] { background: var(--zw-ink); color: #fff; }
.zw-dashboard__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.zw-kpi { min-height: 125px; padding: 15px; border: 1px solid #d2ddd5; border-radius: 14px; background: #fff; }
.zw-kpi[hidden] { display: none; }
.zw-kpi small { color: #667b73; font: 600 .66rem/1.3 var(--sans); }
.zw-kpi b { display: block; margin-top: 14px; font: 600 1.35rem/1 var(--serif); }
.zw-kpi span { display: inline-block; margin-top: 10px; padding: 4px 7px; border-radius: 99px; background: #e7f2e8; color: var(--zw-green); font: 700 .61rem/1 var(--sans); }
.zw-kpi.is-warn span { background: #f8ecd9; color: #8b662e; }

/* Карта на странице курса. */
.zw-viz-map { margin: 25px 0 30px; padding: clamp(19px, 3vw, 28px); border: 1px solid #d6dfd6; border-radius: 22px; background: linear-gradient(130deg, #e5efe4, #fbfbf7 62%, #f6ead6); }
.zw-viz-map h2 { margin: 0 !important; font: 600 clamp(1.4rem, 2.4vw, 1.8rem)/1.15 var(--serif) !important; }
.zw-viz-map > p { margin: 8px 0 0 !important; color: #5f746c; font: 400 .84rem/1.45 var(--sans) !important; }
.zw-viz-map__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 19px; }
.zw-viz-map__grid a { display: flex; min-height: 105px; flex-direction: column; padding: 13px; border: 1px solid #d6dfd6; border-radius: 13px; background: #fff; color: var(--zw-ink); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.zw-viz-map__grid a:hover, .zw-viz-map__grid a:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 24px -20px #17362f; }
.zw-viz-map__grid span { color: var(--zw-green); font: 700 .66rem/1 var(--sans); letter-spacing: .1em; }
.zw-viz-map__grid i { width: 29px; height: 23px; margin: 9px 0; border-radius: 6px; background: linear-gradient(135deg, var(--zw-green) 0 45%, var(--zw-sand) 45% 60%, var(--zw-ink) 60%); }
.zw-viz-map__grid b { margin-top: auto; font: 600 .84rem/1.2 var(--serif); }

@media (max-width: 760px) {
  .zw-cost, .zw-invest, .zw-objections, .zw-dashboard__head { grid-template-columns: 1fr; }
  .zw-flow, .zw-5s__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zw-raci__roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zw-dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zw-viz-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .zw-viz { padding: 17px 14px; }
  .zw-viz__controls, .zw-invest__cards, .zw-dashboard__grid { grid-template-columns: 1fr; }
  .zw-flow { grid-template-columns: 1fr; }
  .zw-flow__stage::after { content: '↓'; top: auto; right: 50%; bottom: -18px; transform: translateX(50%); }
  .zw-5s__meter { grid-template-columns: 72px 1fr 72px; }
  .zw-balance__flow { grid-template-columns: 1fr; }
  .zw-balance__arrow { transform: rotate(90deg); }
  .zw-raci__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zw-hierarchy button { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .zw-viz * { transition: none !important; animation: none !important; } }
@media print { .zw-viz { break-inside: avoid; box-shadow: none; } }