/* NexIP Monitoring Experience V4 — cohesive interactive product detail.
   V3 + the real unmodified account telemetry engine remain the visual base.
   Add only compact, isolated and accessible editorial improvements.
 */
.nx-mon4{--m4-electric:#1378d9;--m4-line:#d4e5f4;--m4-ink:#153759}
.nx-mon4 .nx-mon2__hero{padding-top:12px!important;padding-bottom:13px!important}
.nx-mon4 .nx-mon2__hero h1{max-width:20ch!important;letter-spacing:-.064em!important}
.nx-mon4 .nx-mon2__hero-actions{margin-top:15px!important}
.nx-mon4 .nx-mon3__rail{box-shadow:0 5px 21px rgba(23,70,122,.065)}
.nx-mon4 .nx-mon3__lab{scroll-margin-top:115px}
.nx-mon4 .nx-mon3__lab-card{
  box-shadow:0 20px 46px rgba(14,53,93,.145),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.nx-mon4 .nx-mon3__lab-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important}
.nx-mon4 .nx-mon3__lab-steps{background:linear-gradient(180deg,#09233d,#0c2c4b)!important}
.nx-mon4 .nx-mon3__step.is-active{
  border-bottom-color:#83ceff!important;
  box-shadow:inset 0 -1px 16px rgba(36,134,210,.12)!important;
}
.nx-mon4 .nx-mon3__lab-info{background:linear-gradient(158deg,#123b5f,#0d2947 95%)!important}
.nx-mon4__lab-to-chart{
  display:inline-flex;align-items:center;gap:8px;
  color:#9bd6ff!important;-webkit-text-fill-color:#9bd6ff!important;
  font-size:10px;font-weight:840;text-decoration:none!important;
  padding:7px 10px;border:1px solid rgba(136,204,255,.28);
  border-radius:8px;background:rgba(33,126,197,.11);
  transition:background .2s,border-color .2s;
}
.nx-mon4__lab-to-chart span{color:inherit!important;-webkit-text-fill-color:inherit!important;font-size:15px}
.nx-mon4__lab-to-chart:hover{border-color:rgba(136,204,255,.48);background:rgba(33,126,197,.27);
  color:#fff!important;-webkit-text-fill-color:#fff!important}
.nx-mon4 .nx-mon3__insight-footer{gap:10px;align-items:center;flex-wrap:wrap}
.nx-mon4 .nx-mon3__insight-footer [data-nx-lab-next]{min-height:36px!important}

/* Connected incident story -> the exact real chart, via calibrated
   SVG viewBox/row time coordinates. The overlay never captures pointers. */
.nx-mon4__analytics-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;margin:0 0 8px;
  border:1px solid #cfdfef;border-radius:11px;
  background:
    radial-gradient(ellipse at 89% 0%,rgba(104,178,239,.14),transparent 49%),
    linear-gradient(110deg,#f6fbff,#fff 85%);
}
.nx-mon4__analytics-label{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.nx-mon4__analytics-pulse{display:block;width:8px;height:8px;flex:none;
  border-radius:50%;background:#1bad89;box-shadow:0 0 0 4px #d7f6ec}
.nx-mon4__analytics-label strong{font-size:9px;font-weight:870;letter-spacing:.12em;
  color:#245b88!important;-webkit-text-fill-color:#245b88!important}
.nx-mon4__analytics-label>span:last-child{
  font-size:10px;line-height:1.45;color:#5e7f9c!important;-webkit-text-fill-color:#5e7f9c!important}
.nx-mon4__tour-trigger{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:9px;flex:none;cursor:pointer;min-height:36px;padding:9px 12px!important;
  border:1px solid #b8d7ef!important;border-radius:8px!important;
  background:#e9f5ff!important;color:#145c9d!important;
  -webkit-text-fill-color:#145c9d!important;font-family:inherit;
  font-size:11px!important;font-weight:840!important;line-height:1.25!important;
  box-shadow:none!important;text-decoration:none!important;
  transition:background-color .15s,border-color .15s;
}
.nx-mon4__tour-trigger:hover,.nx-mon4__tour-trigger[aria-expanded="true"]{
  background:#d7edff!important;border-color:#8dbde7!important}
.nx-mon4__tour-trigger span{color:inherit!important;-webkit-text-fill-color:inherit!important;font-size:15px}
.nx-mon4__tour{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;
  padding:15px 19px;margin:0 0 9px;
  border:1px solid #8fbbe4;border-radius:11px;
  background:linear-gradient(108deg,#eaf5ff,#f7fbff);
  box-shadow:0 8px 20px rgba(20,88,161,.066);
}
.nx-mon4__tour[hidden]{display:none!important}
.nx-mon4__tour-step{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:830;letter-spacing:.12em;
  color:#2d86cc!important;-webkit-text-fill-color:#2d86cc!important}
.nx-mon4__tour strong{
  display:block;margin:4px 0 4px;font-size:14px;font-weight:860;
  color:#173f66!important;-webkit-text-fill-color:#173f66!important}
.nx-mon4__tour p{
  margin:0!important;font-size:11.5px!important;line-height:1.58!important;
  color:#587994!important;-webkit-text-fill-color:#587994!important;max-width:73ch}
.nx-mon4__tour-actions{display:flex;align-items:center;gap:6px}
.nx-mon4__tour-actions button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:35px;padding:7px 11px;border:1px solid #c1daef!important;
  border-radius:7px!important;background:#fff!important;
  color:#275f91!important;-webkit-text-fill-color:#275f91!important;
  font-family:inherit;font-size:11px!important;font-weight:800!important;
  cursor:pointer;white-space:nowrap}
.nx-mon4__tour-actions button:hover{border-color:#8dbde8!important;background:#e1f2ff!important}
.nx-mon4__tour-actions button:disabled{
  opacity:.43;cursor:default;background:#fff!important}
.nx-mon4__tour-actions [data-nx-tour-next]{
  background:#136dc8!important;border-color:#136dc8!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important}
.nx-mon4__tour-actions [data-nx-tour-next]:hover{
  background:#0c5ba9!important;border-color:#0c5ba9!important}
.nx-mon4__tour-actions [data-nx-tour-close]{
  width:35px;flex:none;font-size:20px!important;line-height:1}
.nx-mon4 .nx-mon2__actual-telemetry{overflow:visible}
.nx-mon4 [data-nx-telemetry] [data-tm-canvas]{
  position:relative;
  isolation:isolate;
}
.nx-mon4__event-overlay{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  contain:layout paint;
}
.nx-mon4__event-overlay[hidden],.nx-mon4__event-band[hidden]{display:none!important}
.nx-mon4__event-band{
  position:absolute;top:23px;bottom:67px;
  border-left:1px dashed rgba(222,78,101,.58);
  border-right:1px dashed rgba(222,78,101,.58);
  background:rgba(224,81,103,.095);
  min-width:3px;border-radius:2px;
}
.nx-mon4__event-cursor{
  position:absolute;top:17px;bottom:68px;width:1px;
  transform:translateX(-.5px);
  border-left:2px dashed #198bd7;
  transition:left .26s cubic-bezier(.22,.74,.32,1),border-color .22s ease;
}
.nx-mon4__event-flag{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;left:5px;top:5px;max-width:min(170px,40vw);
  min-height:25px;padding:6px 8px;
  background:#0e609f;border:1px solid #0e609f;border-radius:7px;
  box-shadow:0 4px 11px rgba(5,57,100,.16);
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-family:inherit;font-size:9px;font-weight:880;line-height:1.25;
  white-space:nowrap;z-index:1;
  transition:background-color .22s,border-color .22s;
}
.nx-mon4__event-overlay[data-stage="pending"] .nx-mon4__event-cursor,
.nx-mon4__event-overlay[data-stage="down"] .nx-mon4__event-cursor{border-color:#df6680}
.nx-mon4__event-overlay[data-stage="pending"] .nx-mon4__event-flag{
  background:#a16d17;border-color:#a16d17}
.nx-mon4__event-overlay[data-stage="down"] .nx-mon4__event-flag{
  background:#b63f5e;border-color:#b63f5e}
.nx-mon4__event-overlay[data-stage="recovered"] .nx-mon4__event-cursor{border-color:#1dba94}
.nx-mon4__event-overlay[data-stage="recovered"] .nx-mon4__event-flag{
  background:#0b8c71;border-color:#0b8c71}
.nx-mon4 [data-nx-telemetry] .nx-mon4__tour-target{
  outline:2px solid #288bdd!important;outline-offset:4px!important;
  border-radius:8px!important;
  box-shadow:0 0 0 6px rgba(35,142,225,.13)!important;
}
.nx-mon4 [data-nx-telemetry] [data-tm-canvas].nx-mon4__tour-target{
  outline-offset:0!important;
}

/* Combined capacity + interval recommendation, no misleading fake prices. */
.nx-mon4 .nx-mon3__plan-advisor{
  grid-template-columns:minmax(155px,.86fr) auto auto minmax(170px,.76fr)!important;
  padding:13px 16px!important;column-gap:12px!important;
}
.nx-mon4 .nx-mon3__advisor-options{min-width:0}
.nx-mon4__interval-group{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.nx-mon4__interval-group>span{
  font-size:9px;font-weight:820;color:#577ea2!important;-webkit-text-fill-color:#577ea2!important}
.nx-mon4__interval-options{display:flex;align-items:center;gap:4px;padding:4px;
  min-height:44px;border:1px solid #d4e4f3;border-radius:8px;background:#fff}
.nx-mon4__interval-options button{
  display:inline-grid;place-items:center;min-height:36px;padding:6px 9px;
  border:1px solid transparent!important;border-radius:6px!important;
  background:#fff!important;font-family:inherit;font-size:10px!important;
  font-weight:830!important;color:#547491!important;-webkit-text-fill-color:#547491!important;
  white-space:nowrap;cursor:pointer;box-shadow:none!important;
}
.nx-mon4__interval-options button:hover{background:#ecf7ff!important}
.nx-mon4__interval-options button[aria-pressed="true"]{
  background:#126bc8!important;border-color:#126bc8!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important}
.nx-mon4 .nx-mon3__advisor-result{padding-left:12px!important}
.nx-mon4 .nx-mon2__plan.is-recommended{
  border-color:#1879d1!important;
  background:linear-gradient(133deg,#eaf6ff,#fff 85%)!important;
  box-shadow:0 7px 23px rgba(17,101,202,.13)!important;
}
.nx-mon4 .nx-mon2__plan:not(.is-recommended){opacity:.94}

/* Secondary polish: compact content hierarchy, intentional alignment. */
.nx-mon4 .nx-mon2__section{padding-top:18px!important}
.nx-mon4 .nx-mon2__benefit-grid{gap:10px!important}
.nx-mon4 .nx-mon2__benefit{padding:18px 19px!important}
.nx-mon4 .nx-mon2__closing{margin-bottom:22px!important}

/* Modern platform primitives, progressively enhanced. */
@supports (color:color-mix(in srgb,#1378d9,white 50%)){
  .nx-mon4 .nx-mon2__hero-actions>.nx-mon2__button--primary:hover{
    box-shadow:0 8px 25px color-mix(in srgb,#1378d9 30%,transparent)!important;
  }
}
@media(max-width:1200px){
  .nx-mon4 .nx-mon3__plan-advisor{
    grid-template-columns:minmax(140px,1fr) auto auto!important;
  }
  .nx-mon4 .nx-mon3__advisor-result{
    grid-column:1/-1;border-left:0!important;padding:7px 0 0!important;
    border-top:1px solid #d5e4f0;display:grid;grid-template-columns:auto 1fr;gap:4px 9px;
  }
  .nx-mon4 .nx-mon3__advisor-result>small{grid-column:2}
}
@media(max-width:950px){
  .nx-mon4 .nx-mon3__lab-grid{grid-template-columns:minmax(0,1fr)!important}
  .nx-mon4 .nx-mon3__plan-advisor{grid-template-columns:minmax(0,1fr) auto!important}
  .nx-mon4__interval-group{grid-column:1}
  .nx-mon4 .nx-mon3__advisor-result{grid-column:2;grid-row:1/3;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    border-top:0;border-left:1px solid #d5e4f0!important;padding:0 0 0 11px!important}
}
@media(max-width:720px){
  .nx-mon4__analytics-toolbar{align-items:flex-start;flex-wrap:wrap;padding:11px}
  .nx-mon4__analytics-label{flex:1 1 100%}
  .nx-mon4__tour-trigger{width:100%}
  .nx-mon4__tour{grid-template-columns:minmax(0,1fr);gap:10px;padding:13px}
  .nx-mon4__tour-actions{justify-content:flex-end;flex-wrap:wrap}
  .nx-mon4 .nx-mon3__plan-advisor{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
  .nx-mon4 .nx-mon3__plan-advisor>div:first-child{grid-column:1/-1}
  .nx-mon4__interval-group{grid-column:2;grid-row:2}
  .nx-mon4 .nx-mon3__advisor-options{grid-column:1;grid-row:2;align-self:end;flex-wrap:wrap}
  .nx-mon4 .nx-mon3__advisor-result{grid-column:1/-1;grid-row:3;
    border-top:1px solid #d5e4f0;border-left:0!important;
    padding:9px 0 0!important;display:grid;grid-template-columns:auto 1fr}
  .nx-mon4 .nx-mon3__advisor-result>small{grid-column:2}
  .nx-mon4__interval-options{flex-wrap:wrap}
  .nx-mon4__interval-options button{flex:1 1 auto}
}
@media(max-width:480px){
  .nx-mon4 .nx-mon3__insight-footer{align-items:stretch}
  .nx-mon4__lab-to-chart{flex:1 1 100%;min-height:35px;justify-content:space-between}
  .nx-mon4 .nx-mon3__insight-footer [data-nx-lab-next]{
    flex:1 1 100%;justify-content:center}
  .nx-mon4 .nx-mon3__plan-advisor{
    grid-template-columns:minmax(0,1fr)!important}
  .nx-mon4 .nx-mon3__advisor-options{grid-row:2;grid-column:1;align-self:auto;justify-content:space-between}
  .nx-mon4__interval-group{grid-row:3;grid-column:1}
  .nx-mon4 .nx-mon3__advisor-result{grid-row:4;grid-column:1}
  .nx-mon4__interval-options{width:100%}
  .nx-mon4__interval-options button{flex:1 1 20%}
  .nx-mon4__event-flag{font-size:8px;padding:5px 6px;white-space:normal;
    max-width:103px;line-height:1.15}
  .nx-mon4__event-cursor{top:17px}
  .nx-mon4__analytics-label strong{font-size:8px}
  .nx-mon4__analytics-label>span:last-child{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .nx-mon4 *,.nx-mon4 *::before,.nx-mon4 *::after{
    transition:none!important;animation:none!important;scroll-behavior:auto!important;
  }
}
@media print{
  .nx-mon4__tour,.nx-mon4__analytics-toolbar button,.nx-mon4__event-overlay,
  .nx-mon4__interval-group{display:none!important}
  .nx-mon4__analytics-toolbar{background:#fff;box-shadow:none}
}


/* V5 visual refinement — source-compatible, additive, fully scoped.
 * Better hierarchy, legibility and touch affordances without changing telemetry.
 */
.nx-mon4{
  --m5-focus:#1976cd;
  --m5-heading:#123552;
  --m5-muted:#4c6a86;
  --m5-surface:#f8fbff;
}
.nx-mon4 :is(button,a,summary,input,select):focus-visible{
  outline:3px solid var(--m5-focus)!important;
  outline-offset:3px!important;
}
.nx-mon4 :is(.nx-mon3__lab-card,.nx-mon2__plan,.nx-mon2__benefit){
  min-width:0;
}
.nx-mon4 :is(.nx-mon2__hero-main,.nx-mon3__lab-info,.nx-mon3__lab-steps) *{
  overflow-wrap:break-word;
}
.nx-mon4 .nx-mon3__lab-info :is(h2,h3,strong),
.nx-mon4 .nx-mon3__lab-steps :is(h2,h3,strong){
  text-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nx-mon4 .nx-mon3__lab-info :is(p,small),
.nx-mon4 .nx-mon3__lab-steps :is(p,small){
  color:#d4e9fa!important;
  -webkit-text-fill-color:#d4e9fa!important;
}
.nx-mon4 .nx-mon3__lab-info a:not(.nx-mon4__lab-to-chart){
  color:#a7ddff!important;
  -webkit-text-fill-color:#a7ddff!important;
  text-underline-offset:3px;
}
.nx-mon4 .nx-mon3__lab-info a:not(.nx-mon4__lab-to-chart):hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.nx-mon4 .nx-mon3__lab-info :is(button,[role="button"]){
  min-height:36px;
}
.nx-mon4 .nx-mon4__analytics-toolbar,
.nx-mon4 .nx-mon4__tour,
.nx-mon4 .nx-mon3__plan-advisor{
  max-width:100%;
  min-width:0;
}
.nx-mon4 .nx-mon4__tour-actions button:focus-visible,
.nx-mon4 .nx-mon4__tour-trigger:focus-visible{
  outline:3px solid #1378d9!important;
  outline-offset:3px;
}
.nx-mon4 .nx-mon4__event-flag{
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}
.nx-mon4 .nx-mon2__plan{
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
.nx-mon4 .nx-mon2__plan.is-recommended{
  position:relative;
}
.nx-mon4 .nx-mon2__plan.is-recommended::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:inherit;
  background:linear-gradient(90deg,#1582df,#28b7bf);
  pointer-events:none;
}
.nx-mon4 .nx-mon4__interval-options button{
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .nx-mon4 .nx-mon2__plan.is-recommended:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(17,101,202,.17)!important;
  }
}
@media (max-width:720px){
  .nx-mon4 .nx-mon4__tour-actions button{
    min-height:40px;
  }
  .nx-mon4 .nx-mon4__analytics-toolbar{
    gap:12px;
  }
  .nx-mon4 .nx-mon4__tour-trigger{
    min-height:42px;
  }
  .nx-mon4 .nx-mon3__lab-info :is(button,[role="button"]){
    min-height:42px;
  }
  .nx-mon4 .nx-mon4__interval-options button{
    min-height:42px;
  }
}
@media (max-width:480px){
  .nx-mon4 .nx-mon4__tour-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;
    width:100%;
  }
  .nx-mon4 .nx-mon4__tour-actions button{
    width:100%;white-space:normal;
  }
  .nx-mon4 .nx-mon4__tour-actions [data-nx-tour-close]{
    width:40px;
  }
  .nx-mon4 .nx-mon4__event-flag{
    max-width:96px;overflow-wrap:anywhere;
  }
}
@media (forced-colors:active){
  .nx-mon4 .nx-mon2__plan.is-recommended{
    outline:2px solid Highlight!important;
    outline-offset:2px;
  }
  .nx-mon4 .nx-mon4__event-cursor{
    border-color:Highlight!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .nx-mon4 .nx-mon2__plan{
    transform:none!important;transition:none!important;
  }
}