/* ==========================================================================
   BeKavod — вид поломки и страница состояния.

   Отдельный файл, потому что это единственное оформление, которое обязано
   работать, когда всё остальное уже не работает. Ничего не грузит извне,
   ничего не считает, не зависит от JS — только цвет и раскладка.

   Цвет беды приглушённый. Ярко-красная простыня во весь экран пугает
   сильнее, чем помогает: человек и так пришёл сюда с плохой новостью.
   ========================================================================== */

[hidden]{display:none !important}

/* --------------------------------------------------------- карточка сбоя */
.fx{position:relative;overflow:hidden;
    margin-block:clamp(20px,3vh,32px);
    padding:clamp(20px,3vw,32px);
    border:1px solid rgba(208,59,59,.34);border-radius:16px;
    background:
      radial-gradient(120% 130% at 0% 0%, rgba(208,59,59,.10), transparent 62%),
      var(--surface)}
.fx--warn{border-color:rgba(250,178,25,.34);
  background:radial-gradient(120% 130% at 0% 0%, rgba(250,178,25,.10), transparent 62%),
             var(--surface)}
.fx--ok{border-color:rgba(12,163,12,.34);
  background:radial-gradient(120% 130% at 0% 0%, rgba(12,163,12,.10), transparent 62%),
             var(--surface)}

.fx__head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.fx__icon{display:grid;place-items:center;width:46px;height:46px;flex:none;
          border-radius:13px;color:#F0908C;
          border:1px solid rgba(208,59,59,.32);background:rgba(208,59,59,.10)}
.fx--warn .fx__icon{color:#F3C765;border-color:rgba(250,178,25,.32);
                    background:rgba(250,178,25,.10)}
.fx--ok .fx__icon{color:#8FC98F;border-color:rgba(12,163,12,.32);
                  background:rgba(12,163,12,.10)}
.fx__icon svg{width:25px;height:25px}

.fx__eyebrow{margin:0 0 5px;font-family:var(--mono);font-size:11px;
             letter-spacing:.16em;text-transform:uppercase;color:#F0908C}
.fx--warn .fx__eyebrow{color:#F3C765}
.fx--ok .fx__eyebrow{color:#8FC98F}
.fx__t{margin:0;font-size:clamp(20px,2.5vw,29px);line-height:1.15;
       letter-spacing:-.01em;color:var(--ink)}

.fx__why{margin:16px 0 0;max-width:64ch;font-size:16px;line-height:1.55;
         color:var(--ink-2)}

.fx__do{margin-block-start:20px;padding:15px 17px;
        border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.fx__do-h{margin:0 0 9px;font-family:var(--mono);font-size:11px;
          letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fx__do ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.fx__do li{position:relative;padding-inline-start:18px;font-size:15.5px;
           line-height:1.45;color:var(--ink)}
.fx__do li::before{content:"";position:absolute;inset-inline-start:0;
                   inset-block-start:.62em;width:8px;height:1px;
                   background:var(--accent)}

.fx__acts{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:20px}

.fx__more{margin-block-start:18px;border-block-start:1px solid var(--line);
          padding-block-start:14px}
.fx__more summary{cursor:pointer;font-family:var(--mono);font-size:12px;
                  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
                  list-style:none}
.fx__more summary::-webkit-details-marker{display:none}
.fx__more summary::before{content:"▸ ";color:var(--accent)}
.fx__more[open] summary::before{content:"▾ "}
.fx__more summary:hover{color:var(--ink-2)}

.fx__tech{margin:16px 0 0;display:grid;gap:1px;
          border:1px solid var(--line);border-radius:9px;overflow:hidden;
          background:var(--line)}
.fx__row{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:12px;
         padding:9px 13px;background:var(--surface-2)}
.fx__row dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
            color:var(--ink-3)}
.fx__row dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
            overflow-wrap:anywhere}

.fx__ops-h{margin:18px 0 8px;font-family:var(--mono);font-size:11px;
           letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fx__ops{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:7px}
.fx__ops code{display:block;padding:9px 12px;border-radius:8px;
              border:1px solid var(--line);background:#0F0D0B;
              font-family:var(--mono);font-size:12.5px;color:var(--accent);
              overflow-x:auto;white-space:pre}

/* ============================================================ страница */
.st{padding-block:0 clamp(56px,8vh,100px)}
.st__head{margin-block-start:clamp(28px,4vh,46px)}
.st__head h1{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.1;
             letter-spacing:-.02em;color:var(--ink)}
.st__sub{margin:12px 0 0;max-width:66ch;font-size:15.5px;line-height:1.55;
         color:var(--ink-2)}
.st__bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
         margin-block-start:20px}
.st__stamp{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------- цепочка проверок
   Тот же приём, что на главной: вертикальный провод, вдоль которого
   всё нанизано. Здесь он ещё и работает как индикатор — светится до
   того места, где цепочка порвалась. */
.chain{position:relative;margin:clamp(24px,4vh,40px) 0 0;padding:0 0 0 34px;
       list-style:none}
.chain::before{content:"";position:absolute;inset-inline-start:11px;
               inset-block:14px 14px;width:1px;background:var(--line-strong)}
.step{position:relative;padding:14px 0}
.step__dot{position:absolute;inset-inline-start:-34px;inset-block-start:16px;
           width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
           border:1px solid var(--line-strong);background:var(--bg);
           color:var(--ink-3);font-size:12px;line-height:1}
.step__dot svg{width:13px;height:13px}
.step__t{margin:0;font-size:16.5px;color:var(--ink-3);line-height:1.3}
.step__d{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3);
         max-width:62ch}
.step__ms{margin-inline-start:9px;font-family:var(--mono);font-size:11.5px;
          color:var(--ink-3)}

.step.is-run .step__t{color:var(--ink)}
.step.is-run .step__dot{border-color:rgba(240,168,104,.55);color:var(--accent)}
.step.is-run .step__dot::after{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);animation:st-pulse 1.1s ease-in-out infinite}
@keyframes st-pulse{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}

.step.is-ok .step__t{color:var(--ink)}
.step.is-ok .step__d{color:var(--ink-2)}
.step.is-ok .step__dot{border-color:rgba(12,163,12,.5);color:#8FC98F;
                       background:rgba(12,163,12,.12)}
.step.is-bad .step__t{color:var(--ink)}
.step.is-bad .step__d{color:#E9A6A2}
.step.is-bad .step__dot{border-color:rgba(208,59,59,.55);color:#F0908C;
                        background:rgba(208,59,59,.14)}
.step.is-warn .step__t{color:var(--ink)}
.step.is-warn .step__d{color:#E7CB8B}
.step.is-warn .step__dot{border-color:rgba(250,178,25,.5);color:#F3C765;
                         background:rgba(250,178,25,.12)}
.step.is-skip{opacity:.5}
.step.is-skip .step__dot{border-style:dashed}

@media (prefers-reduced-motion:reduce){
  .step.is-run .step__dot::after{animation:none;opacity:.9}
}

/* --------------------------------------------------------------- узлы */
.parts{margin:clamp(22px,3vh,34px) 0 0}
.parts__h{margin:0 0 14px;font-family:var(--mono);font-size:11px;
          letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.parts__grid{display:grid;gap:12px;
             grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
             margin:0;padding:0;list-style:none}
.part{padding:14px 16px;border:1px solid var(--line);border-radius:12px;
      background:var(--surface)}
.part__t{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink)}
.part__led{width:8px;height:8px;border-radius:50%;flex:none;
           background:var(--good);box-shadow:0 0 0 3px rgba(12,163,12,.16)}
.part--bad{border-color:rgba(208,59,59,.34)}
.part--bad .part__led{background:var(--crit);box-shadow:0 0 0 3px rgba(208,59,59,.18)}
/* Третье состояние: узел не проверяется. Не зелёный и не красный —
   иначе одно из двух окажется враньём. */
.part--unknown{border-style:dashed}
.part--unknown .part__t{color:var(--ink-2)}
.part--unknown .part__led{background:transparent;box-shadow:none;
                          border:1px dashed var(--ink-3)}
.part--unknown .part__d{color:var(--ink-3)}
.part__d{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.part--bad .part__d{color:#E9A6A2}
.part__ms{margin-inline-start:auto;font-family:var(--mono);font-size:11.5px;
          color:var(--ink-3)}

/* ------------------------------------------------------- набор сценариев */
.scenes{margin-block-start:clamp(34px,5vh,56px);
        border:1px dashed var(--line-strong);border-radius:14px;
        padding:clamp(16px,2.4vw,24px);background:rgba(26,23,20,.5)}
.scenes summary{cursor:pointer;font-family:var(--mono);font-size:12px;
                letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
                list-style:none}
.scenes summary::-webkit-details-marker{display:none}
.scenes summary::before{content:"▸ ";color:var(--accent)}
.scenes[open] summary::before{content:"▾ "}
.scenes__note{margin:14px 0 0;max-width:70ch;font-size:14.5px;line-height:1.55;
              color:var(--ink-2)}
.scenes__grid{display:grid;gap:9px;margin:16px 0 0;
              grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.scene{display:block;padding:11px 13px;border:1px solid var(--line);
       border-radius:10px;background:var(--surface);text-decoration:none;
       color:var(--ink-2);font-size:14px;line-height:1.35;
       transition:border-color .18s ease, color .18s ease}
.scene:hover{border-color:rgba(240,168,104,.45);color:var(--ink)}
.scene[aria-current]{border-color:var(--accent);color:var(--ink);
                     box-shadow:0 0 14px rgba(240,168,104,.18)}
.scene code{display:block;margin-block-start:5px;font-family:var(--mono);
            font-size:11.5px;color:var(--accent)}

/* ------------------------------------------------- полоса «связь ожила» */
.wire-note{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
           margin-block:16px;padding:11px 15px;border-radius:11px;
           border:1px solid rgba(250,178,25,.32);background:rgba(250,178,25,.08);
           font-size:14.5px;color:#F3C765}
.wire-note b{color:var(--ink)}

/* ================================================= страница «в работе»
   Раздел уже есть в меню, а содержимого ещё нет. Пустая 404 в такой
   ситуации выглядит как сломанный сайт, поэтому здесь честная страница:
   что тут будет, когда и куда пойти сейчас. */
.soon{max-width:64ch;margin-block:clamp(52px,10vh,120px)}
.soon__eyebrow{margin:0 0 14px;display:inline-flex;align-items:center;gap:10px;
               padding:6px 12px;border-radius:999px;
               border:1px solid rgba(240,168,104,.34);background:rgba(240,168,104,.09);
               font-family:var(--mono);font-size:11px;letter-spacing:.16em;
               text-transform:uppercase;color:var(--accent)}
.soon__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);
                 font-style:normal;animation:soon-blink 2.2s ease-in-out infinite}
@keyframes soon-blink{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.soon__eyebrow i{animation:none}}

.soon h1{margin:0;font-size:clamp(30px,4.4vw,52px);line-height:1.08;
         letter-spacing:-.025em;color:var(--ink)}
.soon__lead{margin:18px 0 0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;
            color:var(--ink-2)}
.soon__what{margin:26px 0 0;padding:18px 20px;border:1px solid var(--line);
            border-radius:13px;background:var(--surface)}
.soon__what h2{margin:0 0 12px;font-family:var(--mono);font-size:11px;
               font-weight:500;letter-spacing:.14em;text-transform:uppercase;
               color:var(--ink-3)}
.soon__what ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.soon__what li{position:relative;padding-inline-start:19px;font-size:15.5px;
               line-height:1.45;color:var(--ink)}
.soon__what li::before{content:"";position:absolute;inset-inline-start:0;
                       inset-block-start:.62em;width:9px;height:1px;
                       background:var(--accent)}
.soon__go{display:flex;gap:11px;flex-wrap:wrap;margin-block-start:28px}
.soon__en{margin:30px 0 0;padding-block-start:18px;
          border-block-start:1px solid var(--line);
          font-size:14.5px;line-height:1.55;color:var(--ink-3)}

/* ------------------------------------------------------ ожидание ленты */
.jrn__wait{position:relative;margin:clamp(26px,4vh,42px) 0 0;padding-inline-start:26px;
           font-size:15px;color:var(--ink-3)}
.jrn__wait::before{content:"";position:absolute;inset-inline-start:0;
                   inset-block-start:.35em;width:12px;height:12px;border-radius:50%;
                   border:2px solid rgba(240,168,104,.28);border-top-color:var(--accent);
                   animation:jw-spin .9s linear infinite}
.jrn__wait.is-long{color:#E7CB8B}
@keyframes jw-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.jrn__wait::before{animation:none}}

/* --------------------------------------------------- настоящий кадр
   Приходит из API по сессии. Пока не загрузился — под ним видна та же
   рамка с зерном, что и у пустой записи, поэтому «дыры» на её месте нет. */
.shot__img{position:absolute;inset:0;width:100%;height:100%;
           object-fit:cover;display:block}
.shot__play{z-index:2;text-decoration:none}
.shot__play:hover{color:#fff}
.shot__cam,.shot__dur{z-index:2}

/* Пометка «закрыто по таймауту»: длительность здесь не измерена, а
   упёрта в предел, и выдавать её за факт нельзя. */
.tag-cap{padding:3px 9px;border-radius:999px;
         font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
         color:var(--ink-3);border:1px dashed var(--line-strong)}

/* Полоса «пришло новое». Сама лента не дёргается: вставку делает человек,
   иначе список уезжает под пальцем, а открытое подтверждение удаления
   исчезает вместе с записью. */
.newbar{display:block;width:100%;margin:18px 0 0;padding:11px 15px;
        font:inherit;font-size:14.5px;color:#1A1409;cursor:pointer;
        border:0;border-radius:11px;background:var(--accent);
        box-shadow:0 0 18px rgba(240,168,104,.28)}
.newbar:hover{background:var(--accent-hi)}

/* ------------------------------------------- отказ одного действия
   Ошибка живёт в самой карточке: сломалось действие, а не страница. */
.enerr{margin:14px 0 0;padding:9px 13px;border-radius:9px;
       border:1px solid rgba(208,59,59,.34);background:rgba(208,59,59,.09);
       font-size:14px;line-height:1.45;color:#E9A6A2}
.enerr b{color:var(--ink)}
.enerr a{color:var(--accent)}

@media (max-width:640px){
  /* На телефоне в шапке остаётся только то, ради чего сюда пришли:
     журнал и состояние. Ссылки на разделы главной убираем — логотип
     слева и так ведёт домой, а четыре пункта заворачивались в две
     строки и съедали пол-экрана. */
  .topbar__nav a[data-sec]{display:none}

  .fx__head{grid-template-columns:auto 1fr;gap:13px}
  .fx__icon{width:40px;height:40px;border-radius:11px}
  .fx__row{grid-template-columns:1fr;gap:3px}
  .chain{padding-inline-start:28px}
  .chain::before{inset-inline-start:9px}
  .step__dot{inset-inline-start:-28px;width:19px;height:19px}
}