/* ===== Индикаторы состояния и карта помещений ===== */

/* метка над заголовком */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow .spark { width: 10px; height: 10px; color: var(--primary); }

.spark { display: block; flex: none; overflow: visible; }
.spark path { fill: currentColor; }

/* индикатор помещения */
.node-glyph {
  --c: var(--node);
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: var(--c);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent 75%);
  transition: color 0.5s, background 0.5s;
}
.node-glyph .spark { width: 16px; height: 16px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); transition: transform 0.6s var(--spring); }
.node-glyph.is-open { --c: var(--primary); }
.node-glyph.is-open .spark { animation: node-breathe 2.8s ease-in-out infinite; }
.node-glyph.is-urgent { --c: var(--red); }
.node-glyph.is-urgent .spark { animation: node-alert 1.5s ease-in-out infinite; }
.node-glyph.is-none { --c: var(--faint); }
.node-glyph.is-none .spark { opacity: 0.5; filter: none; }
@keyframes node-breathe {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.45; transform: scale(0.8) rotate(45deg); }
}
@keyframes node-alert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.35); }
}

/* сводка по колледжу */
.campus-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 13px;
  color: var(--muted);
}
.campus-badge b { color: var(--text); font-weight: 600; }
.campus-badge .node-glyph { width: 24px; height: 24px; }
.campus-badge .node-glyph .spark { width: 12px; height: 12px; }

.campus-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.campus-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.campus-state { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.campus-index { font-size: 13px; color: var(--muted); }
.campus-index b { color: var(--text); font-variant-numeric: tabular-nums; }
.campus-meter { position: relative; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.campus-meter i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, transparent), var(--primary));
  transform-origin: left;
  position: relative;
}
.campus-panel.enter .campus-meter i { animation: grow-x 1.5s var(--ease-out) both; animation-delay: calc(var(--enter, 0ms) + 620ms); }
html:not(.is-revealed) .campus-panel.enter .campus-meter i { animation-play-state: paused; }
.campus-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 240% 100%;
  animation: meter-run 3.6s ease-in-out infinite;
}
@keyframes meter-run { from { background-position: 130% 0; } to { background-position: -60% 0; } }
.campus-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--faint); }
.campus-legend span { display: inline-flex; align-items: center; gap: 6px; }
.campus-legend .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--node); box-shadow: 0 0 6px var(--node); }
.campus-legend .dot.open { background: var(--primary); box-shadow: 0 0 6px var(--primary); }
.campus-legend .dot.urgent { background: var(--red); box-shadow: 0 0 6px var(--red); }
.campus-note { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---------- страница заявителя: две колонки на широком экране ---------- */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 980px) {
  .report-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 40px; }
  .report-aside { position: sticky; top: 84px; }
}
.report-aside { display: flex; flex-direction: column; gap: 16px; }
.hero-badge { margin-top: 18px; }
.hero-badge:empty { display: none; }
@media (min-width: 980px) { .hero-badge { display: none; } }

/* помещение и уже известные заявки по нему */
.place-pill .node-glyph { width: 38px; height: 38px; }
.room-note {
  position: relative;
  margin: -4px 0 16px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.room-note.is-open { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.room-note.is-urgent { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.node-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: background 0.2s, translate 0.3s var(--ease-out);
}
.node-row .grow { min-width: 200px; }
.node-row .grow b { display: block; font-size: 14px; }
.node-row .grow span { display: block; }
button.node-row { border: 0; width: 100%; text-align: left; color: inherit; cursor: pointer; font: inherit; }
button.node-row:hover { background: var(--surface-3); translate: 3px 0; }
button.node-row .icon { transition: translate 0.3s var(--ease-out); }
button.node-row:hover .icon { translate: 3px 0; }

/* ---------- заявка принята ---------- */
.done-card { max-width: 640px; margin: 0 auto; }
.ignite { position: relative; width: 96px; height: 96px; display: grid; place-items: center; color: var(--node); }
.ignite::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  animation: ignite-glow 2.4s var(--ease-out) both;
}
.ignite .spark { width: 46px; height: 46px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--node) 60%, transparent)); animation: ignite 1.2s var(--ease-out) both; }
.ignite .ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 150%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--node) 55%, transparent), transparent);
  transform: translate(-50%, -50%) rotate(var(--r));
  animation: ray 1.5s var(--ease-out) 0.15s both;
}
.ignite .ray:nth-of-type(1) { --r: 0deg; }
.ignite .ray:nth-of-type(2) { --r: 45deg; }
.ignite .ray:nth-of-type(3) { --r: 90deg; }
.ignite .ray:nth-of-type(4) { --r: 135deg; }
@keyframes ignite { from { opacity: 0; transform: scale(0.15) rotate(-90deg); } 62% { opacity: 1; transform: scale(1.14) rotate(6deg); } to { transform: scale(1) rotate(0); } }
@keyframes ignite-glow { from { opacity: 0; transform: scale(0.35); } 40% { opacity: 1; } to { opacity: 0.72; transform: scale(1); } }
@keyframes ray {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scaleY(0); }
  45% { opacity: 1; }
  to { opacity: 0.2; transform: translate(-50%, -50%) rotate(var(--r)) scaleY(1); }
}

/* ---------- ход заявки ---------- */
.track-path { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.track-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 15px; height: 1px; background: var(--border-strong); }
.track-fill {
  position: absolute;
  left: 10%;
  top: 15px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 40%, transparent), var(--primary));
  transform-origin: left;
  box-shadow: 0 0 10px var(--primary);
}
.track-enter .track-fill { animation: grow-x 1.3s var(--ease-io) 0.45s both; }
.tp-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.tp-node {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--faint);
  transition: background 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.6s;
}
.tp-node .spark { width: 13px; height: 13px; }
.tp-step span { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--faint); transition: color 0.4s; }
.tp-step.done .tp-node { color: var(--text); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.tp-step.done span { color: var(--muted); }
.tp-step.current .tp-node { color: var(--on-primary); background: var(--primary); border-color: var(--primary); animation: node-call 2.6s ease-in-out infinite; }
.tp-step.current .tp-node .spark { animation: node-breathe 2.8s ease-in-out infinite; }
.tp-step.current span { color: var(--text); }
.tp-step.final.done .tp-node { color: var(--on-primary); background: var(--node); border-color: var(--node); box-shadow: 0 0 0 6px color-mix(in srgb, var(--node) 14%, transparent), 0 0 26px color-mix(in srgb, var(--node) 60%, transparent); }
.track-enter .tp-step { animation: step-in 0.8s var(--spring) both; animation-delay: calc(var(--enter, 0ms) + 0.28s + var(--i) * 0.17s); }
html:not(.is-revealed) .track-enter .tp-step, html:not(.is-revealed) .track-enter .track-fill { animation-play-state: paused; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px) scale(0.72); } to { opacity: 1; transform: none; } }
@keyframes node-call {
  0%, 100% { box-shadow: 0 0 0 5px var(--primary-soft), 0 0 22px color-mix(in srgb, var(--primary) 70%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 8%, transparent), 0 0 34px var(--primary); }
}
.track-caption { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .tp-step span { display: none; } }

/* ---------- панель: карта помещений ---------- */
.campus-card { padding: 18px 20px 22px; }
.campus-card .plan { width: 100%; max-width: 860px; margin: 0 auto; }
.campus-kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ===== Схема колледжа: здание в разрезе ===== */
/* Линии васильковые, как знак и узор на фоне сайта: здание «нарисовано светом», а не серым контуром. */
.plan { position: relative; margin: 0 -4px; }
.pf {
  --pf-line: color-mix(in srgb, var(--primary) 62%, var(--text));
  display: block; width: 100%; height: auto; overflow: visible;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
/* нажатие на фасад фокусирует сам svg, и браузер рисовал вокруг схемы свою белую рамку. У этажей своя подсветка */
.pf:focus, .pf:focus-visible, .pf :focus, .pf :focus-visible { outline: none; }
.pf text { font-family: inherit; }
.pf.is-away, .pf.is-away * { animation-play-state: paused !important; }

/* небо над крышей: узор из фирменных звёзд */
.pf-sky-line { fill: none; stroke: var(--primary); stroke-opacity: 0.34; stroke-width: 0.55; stroke-linecap: round; stroke-linejoin: round; }
.pf-star {
  fill: var(--pf-line);
  filter: drop-shadow(0 0 1.5px var(--primary));
  transform-box: fill-box; transform-origin: center;
  animation: pf-twinkle 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes pf-twinkle {
  0%, 100% { opacity: 0.9; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.25; transform: scale(0.5) rotate(45deg); }
}

/* фасад: заливка светлее к крыше, контур и карнизы светятся мягким васильковым */
.pfg-body stop:first-child { stop-color: color-mix(in srgb, var(--primary) 15%, var(--surface-2)); stop-opacity: 0.85; }
.pfg-body stop:last-child { stop-color: var(--surface-2); stop-opacity: 0.5; }
.pf-body-line { fill: none; stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 1.2; }
.pf-well { fill: color-mix(in srgb, var(--primary) 5%, transparent); }
.pf-cornice { fill: none; stroke: var(--pf-line); stroke-opacity: 0.6; stroke-width: 2; stroke-linecap: round; }
.pf-attic { fill: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); fill-opacity: 0.9; }
.pf-attic-line { fill: none; stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 1.2; stroke-linejoin: round; }
.pf-slab { stroke: var(--pf-line); stroke-opacity: 0.42; stroke-width: 1.4; }
/* пол дальнего ряда кабинетов: тоньше перекрытия */
.pf-gallery { stroke: var(--pf-line); stroke-opacity: 0.16; stroke-width: 0.7; }
.pf-ground { fill: none; stroke-width: 1.2; stroke-linecap: round; }
.pfg-ground stop { stop-color: var(--pf-line); stop-opacity: 0; }
.pfg-ground stop:nth-child(2) { stop-opacity: 0.6; }
/* отсвет под зданием */
.pfg-halo stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-halo stop:first-child { stop-opacity: 0.16; }

/* эмблема университета контуром, надпись по кругу медленно вращается, за ней мягкий свет */
.pf-emblem-disc { fill: color-mix(in srgb, var(--primary) 14%, var(--surface)); stroke: var(--primary); stroke-width: 1; }
.pf-emblem-ring { fill: none; stroke: var(--primary); stroke-opacity: 0.7; stroke-width: 0.7; }
.pf-emblem-text {
  fill: none; stroke: var(--primary); stroke-opacity: 0.55; stroke-width: 1.4; stroke-dasharray: 1.3 1.1;
  transform-box: fill-box; transform-origin: center;
  animation: pf-spin 48s linear infinite;
}
.pf-emblem-line { fill: none; stroke: var(--text); stroke-opacity: 0.85; stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round; }
.pfg-emblem stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-emblem stop:first-child { stop-opacity: 0.45; }
.pf-emblem-glow { transform-box: fill-box; transform-origin: center; animation: pf-breathe 5.5s ease-in-out infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@keyframes pf-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.86); } }

/* луч света раз в несколько секунд проходит по зданию слева направо */
.pf-scan-g { pointer-events: none; }
.pfg-scan stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-scan stop:nth-child(2) { stop-opacity: 0.14; }
.pf-scan { animation: pf-scan 11s cubic-bezier(0.45, 0, 0.25, 1) 2.4s infinite backwards; }
@keyframes pf-scan { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(530px); } }

/* лестницы в разрезе: ближний марш ярче дальнего, площадки заодно с маршем, стены с дверями в коридор */
.pf-steps { fill: color-mix(in srgb, var(--primary) 12%, transparent); stroke: var(--pf-line); stroke-opacity: 0.55; stroke-width: 0.7; stroke-linejoin: round; }
.pf-flight.is-far { opacity: 0.5; }
.pf-handrail { fill: none; stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-rail { fill: none; stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 0.65; stroke-linecap: round; }
.pf-stairwall { fill: none; stroke: var(--pf-line); stroke-opacity: 0.3; stroke-width: 0.9; }
.pf-stair-front { fill: color-mix(in srgb, var(--primary) 11%, transparent); stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 0.7; stroke-linejoin: round; }
.pf-treads { stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 0.75; }
.pf-stair-base { stroke: var(--pf-line); stroke-opacity: 0.55; stroke-width: 1.1; stroke-linecap: round; }
.pf-canopy { stroke: var(--pf-line); stroke-opacity: 0.6; stroke-width: 1.1; stroke-linecap: round; }

/* вход: свет из дверей на землю и стрелка, которая зовёт внутрь */
.pfg-spill stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-spill stop:first-child { stop-opacity: 0.5; }
.pf-spill { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: pf-breathe 4s ease-in-out infinite; }
.pf-entry-arrow {
  fill: none; stroke: var(--primary); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  animation: pf-arrow 2.4s ease-in-out infinite;
}
@keyframes pf-arrow {
  0% { opacity: 0; transform: translateY(3px); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-3px); }
}
.pf-entry { font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; }

/* подпись этажа: цифра, «этаж» и огонёк, если на этаже есть заявки */
.pf-tag-hit { fill: transparent; }
.pf-tag-n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--muted); text-anchor: middle; transition: fill 0.3s; }
.pf-tag-t { font-size: 5.6px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--faint); text-anchor: middle; transition: fill 0.3s; }
.pf-tag-bar { stroke: var(--pf-line); stroke-opacity: 0.2; stroke-width: 1.4; stroke-linecap: round; transition: stroke 0.3s, stroke-opacity 0.3s; }
.pf-tag-dot { fill: var(--primary); filter: drop-shadow(0 0 2px var(--primary)); }
.pf-tag-dot.is-urgent { fill: var(--red); filter: drop-shadow(0 0 2px var(--red)); animation: pl-alert 1.6s ease-in-out infinite; }

/* этаж: подсветка при наведении, по этажу пробегает блик, фокус с клавиатуры */
.pf-floor { cursor: pointer; outline: none; }
.pf-floor-bg { fill: transparent; stroke: transparent; stroke-width: 1.2; transition: fill 0.35s, stroke 0.35s; }
.pf-floor.is-hot .pf-floor-bg { fill: color-mix(in srgb, var(--primary) 9%, transparent); stroke: color-mix(in srgb, var(--primary) 60%, transparent); }
.pf-floor:focus-visible .pf-floor-bg { stroke: var(--primary); stroke-width: 1.6; }
.pf-glint { opacity: 0; pointer-events: none; }
.pfg-glint stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-glint stop:nth-child(2) { stop-opacity: 0.2; }
.pf-floor.is-hot .pf-glint { animation: pf-glint 1.1s var(--ease-out) both; }
@keyframes pf-glint {
  from { opacity: 0; transform: translateX(0); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateX(334px); }
}
.pf-floor.is-hot .pf-tag-n { fill: var(--primary); }
.pf-floor.is-hot .pf-tag-t { fill: var(--text); }
.pf-floor.is-hot .pf-tag-bar { stroke: var(--primary); stroke-opacity: 1; filter: drop-shadow(0 0 3px var(--primary)); }
.pf.has-hot .pf-floor:not(.is-hot) .pf-room { opacity: 0.5; }

/* кабинет: номер, дверь, лампа над дверью, свет из-под двери */
.pf-room { --c: var(--node); transition: opacity 0.3s; }
.pf-room.is-open { --c: var(--primary); }
.pf-room.is-urgent { --c: var(--red); }
.pf-hit { fill: transparent; stroke: transparent; stroke-width: 1; transition: fill 0.25s, stroke 0.25s; }
.pf-room.is-here .pf-hit { stroke: var(--primary); stroke-width: 1.2; filter: drop-shadow(0 0 3px var(--primary)); }
.pf-num {
  font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--faint); text-anchor: middle;
  transform-box: fill-box; transform-origin: center;
  transition: fill 0.25s, transform 0.4s var(--ease-out);
}
.pf-room.is-open .pf-num, .pf-room.is-urgent .pf-num { fill: var(--text); }
.pfg-clear stop:first-child { stop-color: color-mix(in srgb, var(--node) 70%, transparent); }
.pfg-open stop:first-child { stop-color: var(--primary); }
.pfg-urgent stop:first-child { stop-color: var(--red); }
.pfg-clear stop:last-child, .pfg-open stop:last-child, .pfg-urgent stop:last-child { stop-color: var(--bg); }
.pf-icon { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s 0.12s; overflow: visible; }
.pf-door {
  fill: color-mix(in srgb, var(--primary) 7%, var(--surface-3));
  stroke: var(--pf-line); stroke-opacity: 0.5; stroke-width: 0.8;
  transform-box: fill-box; transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out), fill 0.6s, stroke-opacity 0.3s;
}
.pf-door-r { transform-origin: 100% 50%; }
.pf-knob { fill: var(--pf-line); fill-opacity: 0.6; transition: opacity 0.2s; pointer-events: none; }
.pf-lamp { fill: color-mix(in srgb, var(--pf-line) 28%, transparent); }
.pf-sill { stroke: color-mix(in srgb, var(--pf-line) 38%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.pf-room.is-open .pf-lamp, .pf-room.is-urgent .pf-lamp { fill: var(--c); filter: drop-shadow(0 0 2.5px var(--c)); }
.pf-room.is-open .pf-sill, .pf-room.is-urgent .pf-sill { stroke: var(--c); filter: drop-shadow(0 0 2px var(--c)); }
.pf-room.is-open .pf-door, .pf-room.is-urgent .pf-door { stroke: var(--c); stroke-opacity: 0.6; }
.pf-room.is-urgent .pf-lamp, .pf-room.is-urgent .pf-sill { animation: pl-alert 1.6s ease-in-out infinite; }
@keyframes pl-alert { 50% { opacity: 0.35; } }
/* ореол лампы дышит, у срочной заявки от лампы расходятся кольца */
.pf-light { pointer-events: none; }
.pfg-lamp-open stop, .pfg-lamp-urgent stop { stop-color: var(--primary); stop-opacity: 0; }
.pfg-lamp-urgent stop { stop-color: var(--red); }
.pfg-lamp-open stop:first-child { stop-opacity: 0.5; }
.pfg-lamp-urgent stop:first-child { stop-opacity: 0.55; }
.pf-glow { transform-box: fill-box; transform-origin: center; animation: pf-breathe 3.6s ease-in-out infinite; }
.pf-room.is-urgent .pf-glow { animation-duration: 1.6s; }
.pf-ripple {
  fill: none; stroke: var(--red); stroke-width: 0.8; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  animation: pf-ripple 1.8s var(--ease-out) infinite;
}
@keyframes pf-ripple { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
/* дверь открывается внутрь кабинета */
.pf-room.is-demo .pf-door { transform: skewY(-14deg) scaleX(0.3); fill: color-mix(in srgb, var(--surface-3) 70%, var(--text)); }
.pf-room.is-demo .pf-door-r { transform: skewY(14deg) scaleX(0.3); }
.pf-room.is-demo .pf-icon { opacity: 1; }
.pf-room.is-demo .pf-knob { opacity: 0; }
.pf-room.is-demo .pf-hit { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: color-mix(in srgb, var(--primary) 45%, transparent); }
/* двери открываются при наведении только там, где есть мышь; на телефоне касание сразу открывает этаж */
@media (hover: hover) {
  .pf-room:hover .pf-hit { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: color-mix(in srgb, var(--primary) 45%, transparent); }
  .pf-room:hover .pf-num { fill: var(--text); transform: translateY(-1px); }
  .pf-room:hover .pf-door { transform: skewY(-14deg) scaleX(0.3); fill: color-mix(in srgb, var(--surface-3) 70%, var(--text)); }
  .pf-room:hover .pf-door-r { transform: skewY(14deg) scaleX(0.3); }
  .pf-room:hover .pf-icon { opacity: 1; }
  .pf-room:hover .pf-knob { opacity: 0; }
}
/* на телефоне строки о кабинете под схемой нет: навести нельзя; этаж подсвечивается, пока палец на нём */
@media (hover: none) {
  #campus-map .pl-info { display: none; }
  .pf-floor:active .pf-floor-bg { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: color-mix(in srgb, var(--primary) 55%, transparent); }
}

/* первое появление: контур здания прорисовывается линией, этажи поднимаются снизу вверх,
   в кабинетах слева направо «включается свет», лампы с заявками мигают, как при включении */
.plan.is-enter .pf-draw { stroke-dasharray: 1 1; animation: pf-draw 1.6s var(--ease-io) 200ms backwards; }
.plan.is-enter .pf-sky-line { stroke-dasharray: 1 1; animation: pf-draw 2.4s var(--ease-out) 1.3s backwards; }
.plan.is-enter .pf-sky { animation: pl-fade 1.6s var(--ease-out) 1.1s backwards; }
.plan.is-enter .pf-body, .plan.is-enter .pf-attic, .plan.is-enter .pf-well, .plan.is-enter .pf-halo,
.plan.is-enter .pf-slab, .plan.is-enter .pf-ground { animation: pl-fade 1.2s var(--ease-out) 600ms backwards; }
/* у ореола эмблемы и света у входа после появления продолжается своё «дыхание» */
.plan.is-enter .pf-emblem { animation: pf-pop 0.9s var(--spring) 900ms backwards; transform-box: fill-box; transform-origin: center; }
.plan.is-enter .pf-emblem-glow { animation: pf-pop 0.9s var(--spring) 900ms backwards, pf-breathe 5.5s ease-in-out 1.8s infinite; }
.plan.is-enter .pf-floor { animation: pl-slab-in 0.7s var(--ease-out) backwards; }
.plan.is-enter .pf-floor[data-floor="1"] { --fd: 560ms; animation-delay: 420ms; }
.plan.is-enter .pf-floor[data-floor="2"] { --fd: 700ms; animation-delay: 540ms; }
.plan.is-enter .pf-floor[data-floor="3"] { --fd: 840ms; animation-delay: 660ms; }
.plan.is-enter .pf-room { animation: pf-room-in 0.55s var(--ease-out) backwards; animation-delay: calc(var(--fd, 600ms) + var(--i, 0) * 24ms); }
.plan.is-enter .pf-room:not(.is-clear) .pf-light { animation: pf-flicker 0.9s linear backwards; animation-delay: calc(var(--fd, 600ms) + var(--i, 0) * 24ms + 700ms); }
.plan.is-enter .pf-stairs { animation: pl-fade 1.2s var(--ease-out) 600ms backwards; }
.plan.is-enter .pf-entry { animation: pl-fade 1s var(--ease-out) 1.2s backwards; }
.plan.is-enter .pf-spill { animation: pl-fade 1s var(--ease-out) 1.2s backwards, pf-breathe 4s ease-in-out 2.2s infinite; }
.plan.is-enter .pf-entry-arrow { animation-delay: 1.6s; animation-fill-mode: backwards; }
html:not(.is-revealed) .plan.is-enter * { animation-play-state: paused; }
@keyframes pl-slab-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pl-fade { from { opacity: 0; } }
@keyframes pf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pf-pop { from { opacity: 0; transform: scale(0.4) rotate(-40deg); } }
@keyframes pf-room-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes pf-flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  16% { opacity: 0.15; }
  28% { opacity: 1; }
  34% { opacity: 0.4; }
  48%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-star, .pf-emblem-text, .pf-emblem-glow, .pf-spill, .pf-entry-arrow, .pf-glow, .pf-tag-dot.is-urgent { animation: none; }
  .pf-scan-g, .pf-ripple, .pf-glint { display: none; }
}

/* строка под схемой */
.pl-info { display: flex; align-items: center; min-height: 58px; font-size: 13px; line-height: 1.35; }
.pl-info b { font-weight: 600; color: var(--text); }
.pl-hint { color: var(--faint); font-size: 12px; }
.pl-info-type { font-size: 12px; color: var(--muted); }
.pl-info-state { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.pl-info-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--node); box-shadow: 0 0 5px var(--node); }
.pl-info-state.is-open i { background: var(--primary); box-shadow: 0 0 5px var(--primary); }
.pl-info-state.is-urgent i { background: var(--red); box-shadow: 0 0 5px var(--red); }

/* блок шире на больших экранах: заходит в свободное место справа, левый край по сетке шапки */
@media (min-width: 1280px) {
  .report-grid { grid-template-columns: minmax(0, 1fr) 520px; margin-right: max(-240px, calc((1120px - 100vw) / 2 + 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-door, .fv-leaf { transition: opacity 0.2s; }
  .pf-room:hover .pf-door, .pf-room:hover .pf-door-r, .pf-room.is-demo .pf-door, .pf-room.is-demo .pf-door-r { transform: none; opacity: 0.15; }
  .pf-room.is-urgent .pf-lamp, .pf-room.is-urgent .pf-sill, .fv-room.is-urgent .fv-state i { animation: none; }
  .fv, .fv-overlay { animation: none; }
}

/* ===== Кнопка «?» и обучение по схеме ===== */
.campus-panel { position: relative; }
.campus-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-help {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.pl-help:hover, .pl-help[aria-expanded="true"] { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); }
.pl-help:active { transform: scale(0.94); }
.pl-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.campus-panel.is-tut .pl-info, .campus-panel.is-tut .campus-legend { display: none; }
.campus-panel.is-tut .campus-foot { justify-content: flex-end; margin-top: -8px; }
.tut {
  position: relative; z-index: 3;
  padding: 14px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--primary));
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.6);
  animation: tut-in 0.5s var(--ease-out) 0.12s both;
}
.tut.is-leaving { animation: tut-out 0.18s ease-in both; }
@keyframes tut-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes tut-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.tut-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 2px 0; }
.tut-count { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.tut-title { display: block; font-size: 16px; font-weight: 600; }
.tut-text { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tut-body.from-right { animation: tut-slide-r 0.42s var(--ease-out) both; }
.tut-body.from-left { animation: tut-slide-l 0.42s var(--ease-out) both; }
@keyframes tut-slide-r { from { opacity: 0; transform: translateX(18px); } }
@keyframes tut-slide-l { from { opacity: 0; transform: translateX(-18px); } }
.tut-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tut-dots { display: flex; gap: 5px; margin-right: auto; }
.tut-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); transition: width 0.35s var(--ease-out), background 0.35s; }
.tut-dots i.is-on { width: 18px; background: var(--primary); }

/* фокус на блоке: остальная страница затемнена и размыта */
.tut-backdrop {
  position: fixed; inset: 0; z-index: 85;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  animation: tut-fade 0.45s ease-out both;
  cursor: pointer;
}
.tut-backdrop.is-leaving { animation: tut-fade-out 0.3s ease-in both; }
@keyframes tut-fade { from { opacity: 0; } }
@keyframes tut-fade-out { to { opacity: 0; } }
.report-aside.is-tut-host { z-index: 86; }
/* пока открыта подсказка, слой страницы выше шапки: шапка тоже уходит под затемнение */
main.is-tut-page { z-index: 70; }
@media (max-width: 979px) { .report-aside.is-tut-host { position: relative; } }
.campus-panel.is-tut { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 30px 80px -30px color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow); transition: box-shadow 0.5s var(--ease-out); }

/* указатель, который показывает, куда навести или нажать */
.tut-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 18px; height: 18px; margin: -2px 0 0 -2px; pointer-events: none; }
.tut-cursor::before {
  content: ""; position: absolute; inset: 0;
  background: var(--text);
  clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 100%, 54% 94%, 38% 56%, 70% 56%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.tut-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; }

@keyframes tut-click { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }

/* на телефоне вместо курсора палец, который нажимает на этаж */
.tut-cursor.is-finger { width: 30px; height: 30px; margin: -3px 0 0 -10px; }
.tut-cursor.is-finger::before { display: none; }
.tut-cursor.is-finger svg { position: relative; z-index: 1; width: 30px; height: 30px; fill: var(--surface); stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); transform-origin: 30% 10%; }
.tut-cursor.is-finger::after { display: none; }
.tut-ring { position: absolute; left: 1px; top: -6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 25%, transparent); opacity: 0; }
.tut-cursor.is-finger.is-press svg { animation: tut-tap 1.4s var(--ease-out) infinite; }
.tut-cursor.is-finger.is-press .tut-ring { animation: tut-ripple 1.4s var(--ease-out) infinite; }
@keyframes tut-tap { 0%, 100% { transform: none; } 18% { transform: scale(0.86) translateY(2px); } 40% { transform: none; } }
@keyframes tut-ripple { 0%, 12% { opacity: 0; transform: scale(0.3); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
.tut-cursor.is-press::after { animation: tut-click 1.4s var(--ease-out) infinite; }
.tut-cursor.is-finger.is-press::after { animation: none; }

/* что подсвечивается на каждом шаге */
.pf.tut-floors .pf-floor-bg { animation: tut-floor 2.4s ease-in-out infinite; }
.pf.tut-floors .pf-floor[data-floor="2"] .pf-floor-bg { animation-delay: 0.4s; }
.pf.tut-floors .pf-floor[data-floor="3"] .pf-floor-bg { animation-delay: 0.8s; }
@keyframes tut-floor { 0%, 100% { fill: transparent; stroke: transparent; } 35% { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: color-mix(in srgb, var(--primary) 50%, transparent); } }
.pf.tut-lamps .pf-room.is-clear { opacity: 0.4; }
.pf.tut-lamps .pf-room:not(.is-clear) .pf-lamp, .pf.tut-lamps .pf-room:not(.is-clear) .pf-sill { animation: pl-alert 1.2s ease-in-out infinite; }
.pf.tut-lamps .pf-room:not(.is-clear) .pf-num { fill: var(--c); }
@media (prefers-reduced-motion: reduce) {
  .pf.tut-floors .pf-floor-bg { animation: none; fill: color-mix(in srgb, var(--primary) 8%, transparent); }
  .tut, .tut.is-leaving, .tut-body.from-right, .tut-body.from-left, .tut-backdrop, .tut-backdrop.is-leaving { animation: none; }
  .tut-cursor.is-finger.is-press svg, .tut-cursor.is-finger.is-press .tut-ring, .tut-cursor.is-press::after { animation: none; }
}