/* Технадзор: счётчики, вкладка комнаты, панель замечаний, кольцо на плане, подтверждение отправки. */
:root{--sup-red:#c62828;--sup-yellow:#f2b600;--sup-yellow-ink:#5c4300}

/* число замечаний */
.sk-sup-pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 11px/18px inherit;font-family:inherit;font-style:normal;box-sizing:border-box}
.sk-sup-pill.is-red{background:var(--sup-red);color:#fff}
.sk-sup-pill.is-yellow{background:var(--sup-yellow);color:var(--sup-yellow-ink)}
.sk-sup-pill[hidden]{display:none}

/* вкладка «Технадзор» под вкладками комнаты: вторая строка во всю ширину */
#pl.cad.cad-r-on .cad-rtabs,
#pl.cad.sk-fs-on .cad-rtabs,
#pl.cad.is-3d .cad-rtabs{flex-wrap:wrap}
#pl.cad .cad-rtabs .sk-sup-tab{flex:1 1 100%;gap:7px;min-height:34px;border-color:#d5dbe3;background:#fff}
#pl.cad .cad-rtabs .sk-sup-tab .cad-i{display:none}
#pl.cad.sk-sup-on .cad-rtabs [data-rtab].is-on{background:transparent;border-color:transparent;color:#16181c}
#pl.cad .cad-rtabs .sk-sup-tab.is-on{background:#16181c;border-color:#16181c;color:#fff}

/* значок в верхней панели полного экрана: щит и два числа */
#pl .sk-fs-dock-btn[data-dock="sk:supervisor"]{flex:0 0 auto;width:auto;min-width:28px;max-width:none;gap:3px;padding:0 5px}
#pl .sk-fs-dock-btn[data-dock="sk:supervisor"] svg{order:1}
#pl[data-sup-red] .sk-fs-dock-btn[data-dock="sk:supervisor"]::before,
#pl[data-sup-yellow] .sk-fs-dock-btn[data-dock="sk:supervisor"]::after{
  display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  font:700 10px/14px inherit;font-family:inherit;box-sizing:border-box;pointer-events:none
}
#pl[data-sup-red] .sk-fs-dock-btn[data-dock="sk:supervisor"]::before{content:var(--sup-red-txt);order:2;background:var(--sup-red);color:#fff}
#pl[data-sup-yellow] .sk-fs-dock-btn[data-dock="sk:supervisor"]::after{content:var(--sup-yellow-txt);order:3;background:var(--sup-yellow);color:var(--sup-yellow-ink)}
#pl.sk-sup-on .sk-fs-dock-btn[data-dock="sk:supervisor"]{background:#16181c;border-color:#16181c;color:#fff}

/* панель: занимает место свойств в правой колонке */
#sk-sup{display:none}
#pl.sk-sup-on #sk-sup:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;background:#fff;position:relative}
#pl.sk-sup-on .cad-r > .pl-insp,
#pl.sk-sup-on .cad-r > #cad-rmodel,
#pl.sk-sup-on .cad-r > .pl-wallp{display:none!important}
#pl .cad-r:has(> .pl-wallp:not([hidden])) > #sk-sup{display:none!important}
.sk-sup-h{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 10px;border-bottom:1px solid #e3e6ea}
.sk-sup-h b{font-size:15px;font-weight:750;color:#16181c}
#sk-sup-sum{display:inline-flex;align-items:center;gap:4px;margin-right:auto}
.sk-sup-ok{font-size:12px;color:#2f6b3b;font-weight:650}
.sk-sup-x{appearance:none;width:28px;height:28px;padding:0;border:1px solid #d5dbe3;border-radius:7px;background:#f6f7f9;color:#16181c;font-size:17px;line-height:1;cursor:pointer}
.sk-sup-note{flex:0 0 auto;margin:0;padding:6px 10px 0;font-size:11.5px;line-height:1.35;color:#59616a}
.sk-sup-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 10px 12px;-webkit-overflow-scrolling:touch}
.sk-sup-sec{margin-top:8px}
.sk-sup-sec h4{display:flex;align-items:center;gap:6px;margin:6px 0 4px;font-size:13px;font-weight:750;color:#16181c}
.sk-sup-sec h4 span:first-child{margin-right:auto}
.sk-sup-empty{margin:6px 0;font-size:12.5px;line-height:1.4;color:#59616a}

/* замечание */
.sk-sup-it{position:relative;margin:7px 0;padding:8px 10px 9px;border:1px solid #e3e6ea;border-left:4px solid var(--sup-yellow);border-radius:8px;background:#fff;box-sizing:border-box}
.sk-sup-it.is-red{border-left-color:var(--sup-red)}
.sk-sup-it:hover{background:#fafbfc}
.sk-sup-it.is-on{box-shadow:0 0 0 2px #16181c;background:#fafbfc}
.sk-sup-what{appearance:none;display:flex;align-items:flex-start;gap:8px;width:100%;padding:0;border:0;background:none;color:#16181c;font:inherit;font-size:13.5px;font-weight:700;line-height:1.3;text-align:left;cursor:pointer}
.sk-sup-dot{flex:0 0 10px;width:10px;height:10px;margin-top:3px;border-radius:50%;background:var(--sup-yellow)}
.sk-sup-it.is-red .sk-sup-dot{background:var(--sup-red)}
.sk-sup-room{display:inline-block;margin:3px 0 0 18px;padding:1px 7px;border-radius:9px;background:#eef0f3;color:#414850;font-size:11px;font-weight:650}
.sk-sup-why{margin:4px 0 7px 18px;font-size:12.5px;line-height:1.38;color:#4a5159}
.sk-sup-fx{display:flex;flex-wrap:wrap;gap:6px;margin-left:18px}
.sk-sup-fix{appearance:none;min-height:32px;padding:5px 10px;border:1px solid #c9d0d8;border-radius:7px;background:#f6f7f9;color:#16181c;font:inherit;font-size:12.5px;font-weight:650;line-height:1.2;text-align:left;cursor:pointer}
.sk-sup-fix:hover{background:#eceff2}
.sk-sup-fix.is-auto{background:#16181c;border-color:#16181c;color:#fff}
.sk-sup-fix.is-auto:hover{background:#2b3038}
.sk-sup-fix.is-tool{border-color:#2d6cdf;color:#1d4fb0;background:#f1f6ff}
.sk-sup-fix:focus-visible,.sk-sup-what:focus-visible,.sk-sup-x:focus-visible{outline:2px solid #2d6cdf;outline-offset:2px}

/* «Готово» и отмена */
.sk-sup-toast{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;margin:0;padding:9px 10px;background:#16181c;color:#fff;font-size:12.5px;line-height:1.3}
.sk-sup-toast[hidden]{display:none}
.sk-sup-toast button{appearance:none;flex:0 0 auto;min-height:30px;padding:4px 10px;border:1px solid #fff;border-radius:7px;background:transparent;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}

/* кольцо на плане после приближения */
.sk-sup-ring{position:absolute;z-index:6;box-sizing:border-box;border:3px solid var(--sup-red);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:sk-sup-pulse .9s ease-out 2 both}
@keyframes sk-sup-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.sk-sup-ring{animation:none;opacity:.9}}

/* подтверждение перед отправкой клиенту */
dialog.sk-sup-send{max-width:min(460px,calc(100vw - 24px));padding:0;border:0;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
dialog.sk-sup-send::backdrop{background:rgba(16,18,22,.5)}
.sk-sup-send .fl-dlg-in{padding:16px 18px 18px}
.sk-sup-send h3{margin:0 0 6px;font-size:16px;line-height:1.3;color:var(--sup-red)}
.sk-sup-send-p{margin:0 0 8px;font-size:13px;line-height:1.4;color:#414850}
.sk-sup-send ul{margin:0 0 14px;padding-left:18px;font-size:13px;line-height:1.4}
.sk-sup-send-b{display:flex;flex-wrap:wrap;gap:8px}

/* телефон: крупнее зоны нажатия */
@media (max-width:700px){
  .sk-sup-what{font-size:14px}
  .sk-sup-why{font-size:13px}
  .sk-sup-fix{min-height:38px;font-size:13px;padding:7px 11px}
  .sk-sup-x{width:34px;height:34px}
  .sk-sup-toast button{min-height:36px}
}
