/* /server-log-analytics/nginx/ only: the flashlight over nginx's settings, the snap-on bricks,
   the format scoreboard, the filing drawer and the warning lamps. Prefix ngx-. */

/* hero: a flashlight over the settings */
.ngx-fl{border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-deep);overflow:hidden}
.ngx-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--sk-line);font:500 .66rem var(--sk-mono);color:var(--sk-text-3)}
.ngx-btn{padding:.2rem .55rem;border:1px solid var(--sk-line-2);border-radius:6px;background:var(--sk-ink-2);color:var(--sk-text-2);font:600 .62rem var(--sk-mono);cursor:pointer}
.ngx-tree{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;padding:.8rem;background:#05080b}
.ngx-f{position:relative;z-index:1;padding:.5rem .6rem;border:1px solid #223140;border-radius:6px;transition:opacity .45s,border-color .45s,background .45s}
.ngx-fn{margin:0 0 .3rem;font:600 .62rem var(--sk-mono);color:#7d8d9c}
.ngx-f pre{margin:0;font:400 .66rem/1.5 var(--sk-mono);color:#9fb0bf;white-space:pre-wrap;overflow-wrap:anywhere}
.ngx-f mark{background:none;color:inherit;border-radius:2px;transition:background .4s,color .4s}
.ngx-beam{position:absolute;z-index:0;left:var(--bx,25%);top:var(--by,25%);width:58%;height:70%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,197,92,.22),rgba(242,197,92,.06) 60%,transparent);pointer-events:none;transition:left .7s cubic-bezier(.3,.7,.3,1),top .7s cubic-bezier(.3,.7,.3,1),opacity .4s}
.js .ngx-fl[data-step] .ngx-f{opacity:.35}
.ngx-f.lit{opacity:1!important;border-color:#f2c55c;background:rgba(242,197,92,.05)}
.ngx-f.hit{opacity:1!important;border-color:#8fe3b4;background:rgba(143,227,180,.07)}
.ngx-f.hit mark{background:#8fe3b4;color:#05080b}
.ngx-f.skip{opacity:.25!important}
.ngx-say{margin:0;padding:.7rem .9rem 0 2rem;font-size:.82rem;line-height:1.5;color:var(--sk-text-3)}
.ngx-say li{transition:color .3s}
.js .ngx-fl[data-step] .ngx-say li{color:var(--sk-text-4)}
.ngx-say li.now{color:#fff!important}
.ngx-say li.done{color:var(--sk-text-3)!important}
.ngx-found{margin:.6rem .9rem .9rem;padding:.55rem .7rem;border-radius:6px;background:#0d2a1d;border:1px solid #2c6b4c;font-size:.78rem;color:#cfe9db;transition:opacity .4s}
.ngx-found span{display:block;font:500 .62rem var(--sk-mono);color:#8fe3b4}
.ngx-found code{font:600 .74rem var(--sk-mono);color:#fff;background:none;padding:0;overflow-wrap:anywhere}
.js .ngx-fl[data-step]:not([data-step="5"]) .ngx-found{opacity:.15}

/* 01: snap-on bricks */
.ngx-br{margin-top:1.2rem;padding:1rem;border-radius:10px;border:1px solid var(--sk-line-2);background:var(--sk-ink-2)}
.ngx-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;font:500 .74rem/1.55 var(--sk-mono)}
.ngx-base{padding:.55rem .7rem;border-radius:6px 0 0 6px;background:#2b3a48;color:#cfd8e2;border:1px solid #3d5163;overflow-wrap:anywhere;flex:1 1 26rem;min-width:0}
.ngx-q{color:#f2c55c}
.ngx-snap{position:relative;padding:.55rem .8rem;border-radius:0 6px 6px 0;background:#eb6834;color:#fff;font-weight:700;overflow-wrap:anywhere;flex:0 1 auto;min-width:0;max-width:100%;
  box-shadow:inset 3px 0 0 #ffb38f;transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.ngx-snap::before{content:'';position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#eb6834}
.ngx-br[data-state="combined"] .ngx-snap{background:transparent;color:var(--sk-text-3);font-weight:500;border:1px dashed var(--sk-line-2);box-shadow:none}
.ngx-br[data-state="combined"] .ngx-snap::before{display:none}
.ngx-br[data-state="ext"] .ngx-base{display:none}
.ngx-br[data-state="ext"] .ngx-snap{border-radius:6px;flex-basis:100%}
.ngx-br[data-state="ext"] .ngx-snap::before{display:none}
.ngx-br.snap .ngx-snap{animation:ngxSnap .45s cubic-bezier(.3,.7,.3,1)}
@keyframes ngxSnap{from{transform:translateX(2.4rem);opacity:0}to{transform:none;opacity:1}}
.ngx-out{margin-top:1rem}
.ngx-k{margin:0 0 .3rem;font:500 .62rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.ngx-line{margin:0;padding:.6rem .7rem;border-radius:6px;background:#05080b;font:400 .72rem/1.6 var(--sk-mono);color:#cfd8e2;overflow-wrap:anywhere}
.ngx-gain{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:.6rem;margin:.9rem 0 0}
.ngx-gain div{padding:.6rem .8rem;border-left:3px solid var(--sk-ai);background:var(--sk-ink);border-radius:0 8px 8px 0}
.ngx-gain dt{font:500 .62rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.ngx-gain dd{margin:.2rem 0 0;font-size:.9rem;line-height:1.5;color:var(--sk-text-2)}
.ngx-gain code{font-size:.78rem}

/* 02: format scoreboard */
.ngx-smps{margin:1rem 0 .4rem}
.ngx-sb{padding:1.1rem;border-radius:10px;background:#17212b;color:#cfd8e2;box-shadow:0 10px 30px rgba(23,33,43,.18)}
.ngx-sbh{display:flex;justify-content:space-between;font:500 .62rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:#7d8d9c}
.ngx-sb ol{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.ngx-sb li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 2rem;gap:.6rem;align-items:center;padding:.45rem .6rem;border-radius:6px;background:#0d151c;border:1px solid #223140;transition:border-color .3s}
.ngx-sb li code{font:600 .7rem var(--sk-mono);color:#fff;background:none;padding:0;overflow-wrap:anywhere}
.ngx-sb li i{height:10px;border-radius:5px;background:#223140;overflow:hidden}
.ngx-sb li b{display:block;height:100%;width:var(--w,0%);background:#9fb0bf;border-radius:5px;transition:width .6s cubic-bezier(.3,.7,.3,1)}
.ngx-sb li em{font:700 .9rem var(--sk-mono);font-style:normal;color:#fff;text-align:right}
.ngx-sb li.win{border-color:#8fe3b4}
.ngx-sb li.win b{background:#8fe3b4}
.ngx-sb li.fb b{background:#f2c55c}
.ngx-win{margin:.9rem 0 0;font-size:.85rem;color:#9fb0bf}
.ngx-win span{font:500 .62rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase}
.ngx-win code{font:700 .78rem var(--sk-mono);color:#fff;background:none;padding:0}
.ngx-win b{color:#8fe3b4}
.ngx-sb[data-state="custom"] .ngx-win b{color:#ffb38f}
.ngx-sbs{margin:.5rem 0 0;font-size:.9rem;line-height:1.55;color:#e1e7ec}

/* 03: filing drawer */
.ngx-drw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:1.4rem}
.ngx-dr{position:relative;padding:1rem 1rem 1.1rem;border-radius:4px 4px 10px 10px;background:linear-gradient(#2a3642,#212c36);border:1px solid #3d5163;border-top:10px solid #3d5163}
.ngx-dr::before{content:'';position:absolute;left:50%;top:-8px;width:3.4rem;height:6px;margin-left:-1.7rem;border-radius:3px;background:#9fb0bf}
.ngx-drl{margin:0 0 .6rem;font:500 .62rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.ngx-files{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.ngx-files[hidden]{display:none}
.ngx-files li{padding:.5rem .7rem .5rem .9rem;border-radius:3px 6px 6px 3px;background:#f3efe4;color:#2b3238;border-left:4px solid #f2c55c;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.ngx-files li:nth-child(2n){border-left-color:#6aa5ee}
.ngx-files code{display:block;font:700 .72rem var(--sk-mono);color:#17212b;background:none;padding:0;overflow-wrap:anywhere}
.ngx-files span{display:block;font-size:.8rem;line-height:1.45;color:#4a5560}
.ngx-dr.open .ngx-files li{animation:ngxCard .5s cubic-bezier(.3,.7,.3,1) backwards}
.ngx-dr.open .ngx-files li:nth-child(2){animation-delay:.05s}.ngx-dr.open .ngx-files li:nth-child(3){animation-delay:.1s}
.ngx-dr.open .ngx-files li:nth-child(4){animation-delay:.15s}.ngx-dr.open .ngx-files li:nth-child(5){animation-delay:.2s}.ngx-dr.open .ngx-files li:nth-child(6){animation-delay:.25s}
@keyframes ngxCard{from{transform:translateY(-.8rem);opacity:0}to{transform:none;opacity:1}}
.ngx-never{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.ngx-never li{padding:.55rem .8rem;border-left:3px solid #1baf7a;background:var(--sk-ink-2);border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.5;color:var(--sk-text-2)}
.ngx-never b{color:#fff}

/* 04: warning lamps */
.ngx-wl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.4rem;align-items:center;margin-top:1.2rem;padding:1.2rem;border-radius:14px;background:radial-gradient(ellipse at 50% 0,#1d2833,#0b1117);border:1px solid #2b3a48}
.ngx-lamps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.ngx-lamps li{display:flex;align-items:center;gap:.55rem;font:500 .74rem var(--sk-mono);color:var(--sk-text-3)}
.ngx-lamps i{flex:0 0 14px;height:14px;border-radius:50%;background:#1baf7a;box-shadow:0 0 8px rgba(27,175,122,.7);transition:background .3s,box-shadow .3s}
.ngx-lamps li.bad{color:#ffb38f}
.ngx-lamps li.bad i{background:#ff6a3d;box-shadow:0 0 12px rgba(255,106,61,.9);animation:ngxBlink 1s steps(2,end) 3}
@keyframes ngxBlink{50%{background:#5a2414;box-shadow:none}}
.ngx-read{padding:.9rem 1rem;border-radius:8px;background:#05080b;font:400 .74rem/1.6 var(--sk-mono);color:#cfd8e2}
.ngx-read p{margin:0;overflow-wrap:anywhere}
.ngx-l1{color:#8fe3b4}
.ngx-wl:not([data-state="ok"]) .ngx-l1{color:#ffb38f}
.ngx-l2{margin-top:.45rem!important;color:#e1e7ec}
.ngx-l2 span:first-child{display:inline-block;margin-right:.3rem;padding:0 .35rem;border-radius:3px;background:#2b3a48;font-size:.62rem;text-transform:uppercase;color:#9fb0bf}
.ngx-l3{margin-top:.45rem!important;color:#7d8d9c}

.ngx-end{margin-top:2.4rem;align-items:start}

@media (max-width:760px){
  .ngx-tree{grid-template-columns:minmax(0,1fr)}
  .ngx-beam{width:90%;height:30%}
  .ngx-gain,.ngx-drw,.ngx-wl{grid-template-columns:minmax(0,1fr)}
  .ngx-base{flex-basis:100%;border-radius:6px 6px 0 0}
  .ngx-snap{border-radius:0 0 6px 6px;flex-basis:100%}
  .ngx-snap::before{left:50%;top:-6px;margin:0 0 0 -6px}
  .ngx-sb li{grid-template-columns:minmax(0,1fr) 4rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .ngx-beam,.ngx-f,.ngx-sb li b{transition:none}
  .ngx-br.snap .ngx-snap,.ngx-dr.open .ngx-files li,.ngx-lamps li.bad i{animation:none}
}