/* ==========================================================================
   DMPS STATUS PAGE - CUSTOM CSS v3.2 ("Signal" + motion + all-clear)
   Des Moines Public Schools
   Paste into: Statuspage > Customize page > Custom CSS
   Pairs with: Custom Header HTML v2.1 + Custom Footer HTML v2.1 (unchanged)
   Design-only refresh of v2.1: no markup, wording, or link changes.
   Rollback: see the README (the v3.0.2 no-motion file is preferred).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --dmps-blue:#00467F;        /* PMS 541 */
  --dmps-blue-deep:#013668;
  --dmps-gold:#FDB913;        /* PMS 130 - accent only, never text on white */
  --dmps-ink:#1B2B3A;
  --dmps-body:#34414E;
  --dmps-muted:#5F6062;
  --dmps-soft:#616B78;        /* small gray text, 4.5:1+ on white */
  --dmps-line:#DFE7F0;
  --dmps-line-strong:#C9D8E8;
  --dmps-surface:#EDF2F8;
  --dmps-card:#FFFFFF;

  /* status ink (text) + tints (pill backgrounds); every pair >= 4.5:1 */
  --st-green:#1E7B3C;   --st-green-tint:#E7F4EC;
  --st-yellow:#8A6400;  --st-yellow-tint:#FFF4D6;
  --st-orange:#B04A00;  --st-orange-tint:#FCEEE3;
  --st-red:#B93221;     --st-red-tint:#FBEAE8;
  --st-blue:#2471A3;    --st-blue-tint:#E6F0F7;  --st-blue-ink:#1D5E8A;

  --font-sans:'Lato','Gill Sans','Trebuchet MS',Calibri,Arial,sans-serif;
  --radius:12px;              /* cards + banner (header script pins 12px inline) */
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(1,54,104,.06),0 1px 3px rgba(1,54,104,.08);
  --shadow-md:0 12px 28px -6px rgba(1,54,104,.20),0 2px 6px rgba(1,54,104,.06);
  --shadow-lg:0 24px 48px -18px rgba(1,54,104,.45),0 6px 16px rgba(1,54,104,.10);
  --container:960px;
}

/* Page "signal" color follows Statuspage's own overall-status body class */
body{ --sig:253,185,19; }
body.status-none       { --sig:92,224,138;  }
body.status-minor      { --sig:253,185,19;  }
body.status-major      { --sig:255,140,66;  }
body.status-critical   { --sig:255,99,84;   }
body.status-maintenance{ --sig:124,196,242; }

/* ---------- 2. Base ---------- */
body{
  background:var(--dmps-surface) !important;
  font-family:var(--font-sans);
  color:var(--dmps-body);
  -webkit-font-smoothing:antialiased;
}
.layout-content.status{ font-family:var(--font-sans); }
.layout-content.status .container{ max-width:var(--container) !important; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--dmps-blue-deep); /* visible on light surfaces */
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(253,185,19,.95) !important; /* visible on blue/dark */
  border-radius:4px;
}

/* ---------- 3. Hero ---------- */
.dmps-hero{
  position:relative;
  z-index:3;                  /* keeps the Subscribe panel above the floating status layer */
  background:
    radial-gradient(760px 360px at calc(50% + min(42vw,380px)) 0%, rgba(255,255,255,.10), transparent 70%),
    var(--dmps-blue);
  color:#fff;
  font-family:var(--font-sans);
  box-shadow:inset 0 4px 0 rgb(var(--sig)); /* status light along the top edge */
}
/* Signal field: faint dot grid + broadcast rings radiating from the Subscribe button */
.dmps-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-radial-gradient(circle at calc(50% + min(42vw,380px)) 62px,
      rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 58px),
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image:radial-gradient(700px 420px at calc(50% + min(42vw,380px)) 62px, #000 0%, rgba(0,0,0,.45) 48%, transparent 78%);
          mask-image:radial-gradient(700px 420px at calc(50% + min(42vw,380px)) 62px, #000 0%, rgba(0,0,0,.45) 48%, transparent 78%);
}
/* Live ping: one soft ring in the current status color */
.dmps-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:calc(50% + min(42vw,380px));
  top:62px;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  outline:2px solid rgba(var(--sig),.9);
  outline-offset:0;
  opacity:0;
  animation:dmps-ping 2.2s .6s cubic-bezier(.2,.65,.3,1) 2;    /* two pings on load, done by 5s */
}
.dmps-hero-inner{
  position:relative;
  z-index:1;
  width:90%;
  max-width:var(--container);
  margin:0 auto;
  padding:30px 0 36px;
}

/* Row 1: brand lockup + subscribe */
.dmps-hero-top{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.dmps-hero-logo{ display:block; line-height:0; flex:0 0 auto; }
.dmps-hero-logo svg{
  width:150px; height:auto; display:block;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.dmps-hero-text{ flex:1 1 auto; min-width:200px; }
.dmps-hero-eyebrow{
  margin:0 0 3px;
  color:var(--dmps-gold);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  animation:dmps-fade .5s ease-out backwards;
}
.dmps-hero-title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,20,45,.30);
  animation:dmps-rise .55s .08s ease-out backwards;
}
.dmps-hero-title::after{
  content:"";
  display:block;
  width:78px; height:4px;
  margin-top:9px;
  background:var(--dmps-gold);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  animation:dmps-draw .5s .5s ease-out forwards;
}
.dmps-hero-subscribe{ flex:0 0 auto; margin-left:auto; position:relative; }

/* Row 2: three action tiles */
.dmps-tiles{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.dmps-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  background:var(--dmps-card);
  border-radius:14px;
  border-bottom:3px solid var(--dmps-gold);
  box-shadow:0 10px 24px -10px rgba(0,16,40,.55), 0 1px 2px rgba(0,16,40,.20);
  padding:18px 14px 15px;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
  animation:dmps-rise .5s ease-out backwards;
}
.dmps-tiles .dmps-tile:not(:nth-child(2))::before,
.dmps-tiles .dmps-tile:not(:nth-child(2))::after{
  content:"";
  position:absolute;
  bottom:10px;
  width:2px;
  height:calc(100% - 20px);
  background:var(--dmps-gold);
  border-radius:2px;
  opacity:.85;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .28s ease;
}
.dmps-tiles .dmps-tile:not(:nth-child(2))::before{ left:0; }
.dmps-tiles .dmps-tile:not(:nth-child(2))::after{ right:0; }
.dmps-tiles .dmps-tile:not(:nth-child(2)):hover::before,
.dmps-tiles .dmps-tile:not(:nth-child(2)):hover::after,
.dmps-tiles .dmps-tile:not(:nth-child(2)):focus-visible::before,
.dmps-tiles .dmps-tile:not(:nth-child(2)):focus-visible::after{
  transform:scaleY(1);
}
.dmps-tiles .dmps-tile:not(:nth-child(2)):hover,
.dmps-tiles .dmps-tile:not(:nth-child(2)):focus-visible{
  box-shadow:0 0 0 1px rgba(253,185,19,.28), 0 0 12px 1px rgba(253,185,19,.22), 0 16px 30px -12px rgba(0,16,40,.6);
}
.dmps-tile:nth-child(1){ animation-delay:.16s; }
.dmps-tile:nth-child(2){ animation-delay:.26s; }
.dmps-tile:nth-child(3){ animation-delay:.36s; }

/* Center tile (Submit a Ticket) = primary action */
.dmps-tiles .dmps-tile:nth-child(2){
  background:#FFFBEE;
  border:2px solid var(--dmps-gold);
  border-bottom-width:3px;
  animation:
    dmps-rise .5s .26s ease-out backwards,
    dmps-halo 3s 1.2s ease-out 1;
}
.dmps-tiles .dmps-tile:nth-child(2) .dmps-tile-icon{ background:rgba(253,185,19,.22); }
.dmps-tiles .dmps-tile:nth-child(2),
.dmps-tiles .dmps-tile:nth-child(2) .dmps-tile-value,
.dmps-tiles .dmps-tile:nth-child(2) .dmps-tile-icon{
  transition:background-color .22s ease, color .22s ease,
             border-color .22s ease, transform .18s ease;
}
.dmps-tiles .dmps-tile:nth-child(2):hover,
.dmps-tiles .dmps-tile:nth-child(2):focus-visible,
.dmps-tiles .dmps-tile:nth-child(2):active{
  background:#FFF6DE;
  transform:translateY(-3px);
}
.dmps-tiles .dmps-tile:nth-child(2):hover .dmps-tile-value,
.dmps-tiles .dmps-tile:nth-child(2):focus-visible .dmps-tile-value,
.dmps-tiles .dmps-tile:nth-child(2):active .dmps-tile-value{
  color:var(--dmps-blue-deep);
}
.dmps-tiles .dmps-tile:nth-child(2):hover .dmps-tile-icon,
.dmps-tiles .dmps-tile:nth-child(2):focus-visible .dmps-tile-icon,
.dmps-tiles .dmps-tile:nth-child(2):active .dmps-tile-icon{
  background:var(--dmps-blue);
  color:#fff;
  transform:scale(1.07);
}
@keyframes dmps-halo{
  0%  { box-shadow:0 0 0 0 rgba(253,185,19,.55), 0 10px 24px -10px rgba(0,16,40,.55); }
  55% { box-shadow:0 0 0 13px rgba(253,185,19,0), 0 10px 24px -10px rgba(0,16,40,.55); }
  100%{ box-shadow:0 0 0 0 rgba(253,185,19,0), 0 10px 24px -10px rgba(0,16,40,.55); }
}
.dmps-tile:hover{ transform:translateY(-3px); }
.dmps-tile-icon{
  width:46px; height:46px;
  border-radius:50%;
  background:#EAF1F8;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dmps-blue);
  transition:background .16s ease;
}
.dmps-tile-icon svg{ width:21px; height:21px; }
.dmps-tile:hover .dmps-tile-icon{ background:rgba(253,185,19,.28); }
.dmps-tile-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
}
.dmps-tile-label{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dmps-muted);
}
.dmps-tile-value{
  font-size:1.04rem;
  font-weight:800;
  color:var(--dmps-blue);
  letter-spacing:.01em;
}

/* Subscribe control (Statuspage injects into #replace-with-subscribe) */
.updates-dropdown-container{ display:inline-flex !important; }
#show-updates-dropdown{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.62rem 1.2rem;
  border-radius:999px;
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.85rem;
  color:#fff !important;
  background:rgba(1,40,80,.55) !important;
  border:2px solid var(--dmps-gold) !important;
  box-shadow:0 0 0 4px rgba(253,185,19,.12);
  text-decoration:none !important;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease, transform .15s ease, box-shadow .18s ease;
  animation:dmps-fade .5s .3s ease-out backwards;
}
#show-updates-dropdown:hover,
#show-updates-dropdown:focus-visible{
  background:var(--dmps-gold) !important;
  color:var(--dmps-blue-deep) !important;
  border-color:var(--dmps-gold) !important;
  box-shadow:0 0 0 6px rgba(253,185,19,.22);
  transform:translateY(-1px);
}
#show-updates-dropdown::before{
  content:"";
  width:1em; height:1em;
  background:var(--dmps-gold);
  transition:background-color .18s ease;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm6-5V7A6 6 0 0 0 9 1.2V1a1 1 0 1 0-2 0v.2A6 6 0 0 0 2 7v4l-1.3 1.9a.8.8 0 0 0 .66 1.3h13.28a.8.8 0 0 0 .66-1.3z"/></svg>') no-repeat center / contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm6-5V7A6 6 0 0 0 9 1.2V1a1 1 0 1 0-2 0v.2A6 6 0 0 0 2 7v4l-1.3 1.9a.8.8 0 0 0 .66 1.3h13.28a.8.8 0 0 0 .66-1.3z"/></svg>') no-repeat center / contain;
}
#show-updates-dropdown:hover::before,
#show-updates-dropdown:focus-visible::before{ background:var(--dmps-blue-deep); }

/* Subscribe panel in brand voice */
.updates-dropdown{
  border-radius:14px !important;
  border:1px solid var(--dmps-line) !important;
  box-shadow:var(--shadow-lg) !important;
  font-family:var(--font-sans);
}

/* Gold swoosh divider - echoes the curve in the DMPS logo.
   The 3px blue lip + 1px tuck close the hairline seam under the hero. */
.dmps-swoosh{
  line-height:0;
  margin-top:-1px;
  background:linear-gradient(var(--dmps-blue) 0 3px, var(--dmps-surface) 3px);
}
.dmps-swoosh svg{ display:block; width:100%; height:56px; }

/* ---------- 4. Status layer: floats up over the swoosh (main status page only;
   incident and history pages open with a plain title, so they keep normal spacing) ---------- */
.layout-content.status-index .custom-header-container{ margin-bottom:0 !important; }
.layout-content.status-index .custom-header-container + .container{
  position:relative;          /* no z-index on purpose: keeps Statuspage modals on the root stacking layer */
  margin-top:-34px !important;
}

/* 4a. Overall-status banner */
.layout-content.status.status-index .page-status{
  position:relative;
  overflow:hidden;
  margin-top:0;
  margin-bottom:30px !important;
  padding:22px 28px;
  border:0 !important;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.page-status .status{
  font-family:var(--font-sans);
  font-weight:900;
  font-size:1.3rem !important;
  letter-spacing:.005em;
  display:flex;
  align-items:center;
  gap:14px;
  text-shadow:none;
}
.page-status .last-updated-stamp{ opacity:.9; }
.page-status .last-updated-stamp:not(:empty){
  display:inline-block;
  background:rgba(0,0,0,.38);
  padding:2px 10px;
  border-radius:6px;
  margin-top:6px;
}

/* Banner state colors. Statuspage's admin color settings inject 6-class rules
   (".layout-content.status.status-index .page-status.status-*"), so we match
   that prefix and use !important. Gradients stay >= 3:1 under 20px+ bold white. */
.layout-content.status.status-index .page-status,
.page-status{
  background-repeat:no-repeat !important;
  background-size:300px auto, auto !important;
  background-position:right -30px bottom -2px, 0 0 !important;
}
.page-status.status-none,
.layout-content.status.status-index .page-status.status-none{
  background-color:#1F8A3D !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 125'%3E%3Cpath fill='%23ffffff' fill-opacity='.10' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E"),
    linear-gradient(115deg, #17783A 0%, #1F8A3D 45%, #23963F 100%) !important;
}
.page-status.status-minor,
.page-status.status-yellow,
.layout-content.status.status-index .page-status.status-minor{
  background-color:var(--dmps-gold) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 125'%3E%3Cpath fill='%23ffffff' fill-opacity='.16' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 14px, transparent 14px 28px) !important;
  background-size:300px auto, auto !important;
}
.page-status.status-minor .status,
.page-status.status-yellow .status,
.page-status.status-minor .last-updated-stamp,
.page-status.status-yellow .last-updated-stamp,
.layout-content.status.status-index .page-status.status-minor .status,
.layout-content.status.status-index .page-status.status-minor .last-updated-stamp{
  color:#402F00 !important;
}
.page-status.status-major,
.page-status.status-orange,
.layout-content.status.status-index .page-status.status-major{
  background-color:#B04A00 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 125'%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(0,0,0,.08) 0 14px, transparent 14px 28px) !important;
}
.page-status.status-critical,
.page-status.status-red,
.layout-content.status.status-index .page-status.status-critical{
  background-color:#B93221 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 125'%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(0,0,0,.09) 0 14px, transparent 14px 28px) !important;
}
.page-status.status-maintenance,
.page-status.status-blue,
.layout-content.status.status-index .page-status.status-maintenance{
  background-color:var(--st-blue) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 125'%3E%3Cpath fill='%23ffffff' fill-opacity='.09' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E"),
    linear-gradient(115deg, #1F6594 0%, #2471A3 100%) !important;
}

/* Banner state icons: a white disc with a live pulse when all is well,
   shape icons otherwise (shape + words, never color alone) */
.page-status.status-none .status::before{
  content:"";
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%231F8A3D" d="M6.2 12.3L2.5 8.6l1.4-1.4L6.2 9.5l5.9-5.9 1.4 1.4z"/></svg>') no-repeat center / 18px;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:dmps-pulse 2.2s ease-out 2;
}
.page-status.status-minor .status::before,
.page-status.status-yellow .status::before,
.page-status.status-major .status::before,
.page-status.status-orange .status::before{
  content:"";
  flex:0 0 auto;
  width:20px; height:20px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 2l8 14H2L10 2z"/></svg>') no-repeat center / contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 2l8 14H2L10 2z"/></svg>') no-repeat center / contain;
}
.page-status.status-critical .status::before,
.page-status.status-red .status::before{
  content:"";
  flex:0 0 auto;
  width:18px; height:18px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 3.4L3.4 2 14 12.6 12.6 14zM12.6 2L14 3.4 3.4 14 2 12.6z"/></svg>') no-repeat center / contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 3.4L3.4 2 14 12.6 12.6 14zM12.6 2L14 3.4 3.4 14 2 12.6z"/></svg>') no-repeat center / contain;
}
.page-status.status-maintenance .status::before,
.page-status.status-blue .status::before{
  content:"";
  flex:0 0 auto;
  width:18px; height:18px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.6 1.6l1.8 1.8-1.6 1.6 2.9 2.9 1.6-1.6 1.8 1.8-3.2 3.2L6.8 8.4 3.6 11.6 1.2 9.2 4.4 6l-1-1 2.2-2.2 1 1 3-2.2z"/></svg>') no-repeat center / contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.6 1.6l1.8 1.8-1.6 1.6 2.9 2.9 1.6-1.6 1.8 1.8-3.2 3.2L6.8 8.4 3.6 11.6 1.2 9.2 4.4 6l-1-1 2.2-2.2 1 1 3-2.2z"/></svg>') no-repeat center / contain;
}

/* 4b. Active incident = alert card with a severity band */
.unresolved-incidents{ margin-bottom:30px !important; }
.unresolved-incidents .unresolved-incident{
  --sev:36,113,163;
  position:relative;
  padding:0 !important;
  overflow:hidden;
  background:var(--dmps-card) !important;
  border:0 !important;
  border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px rgba(var(--sev),.35), var(--shadow-lg);
  color:var(--dmps-ink) !important;
  text-shadow:none;
  margin-bottom:18px;
}
.unresolved-incident.impact-minor   { --sev:253,185,19; }
.unresolved-incident.impact-major   { --sev:176,74,0; }
.unresolved-incident.impact-critical{ --sev:185,50,33; }
.unresolved-incident.impact-none,
.unresolved-incident.impact-maintenance{ --sev:36,113,163; }

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
  padding:16px 22px;
  border:0 !important;
  border-radius:0;
  color:#fff !important;
  background-color:rgb(var(--sev)) !important;
  background-image:linear-gradient(135deg, rgba(0,0,0,.09) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.09) 75%, transparent 75%, transparent) !important;
  background-size:40px 40px !important;
  animation:dmps-hazard 4.5s linear 1;
  text-shadow:none;
}
/* live dot */
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title::before{
  content:"";
  flex:0 0 auto;
  width:12px; height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:dmps-pulse 1.8s ease-out 2;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.actual-title{
  flex:1 1 auto;
  min-width:0;
  color:#fff !important;
  font-weight:900;
  font-size:1.3rem;
  letter-spacing:.005em;
  text-decoration:none;
  white-space:normal !important;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.actual-title:hover{ text-decoration:underline; }
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.subscribe{
  flex:0 0 auto;
  margin-left:auto;
  padding:6px 14px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  color:#fff !important;
  background:transparent;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.subscribe:hover,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.subscribe:focus-visible{
  background:#fff;
  color:rgb(var(--sev)) !important;
}
/* Minor impact = gold band, so the ink flips to deep blue */
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-minor .incident-title,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-minor .incident-title a.actual-title,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-minor .incident-title a.subscribe{
  color:var(--dmps-blue-deep) !important;
  border-color:var(--dmps-blue-deep);
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-minor .incident-title::before{ background:var(--dmps-blue-deep); }
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-minor .incident-title{
  background-image:linear-gradient(135deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent) !important;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates{
  border:0 !important;
  padding:18px 22px 20px !important;
  background:linear-gradient(180deg, rgba(var(--sev),.06), transparent 70px);
  color:var(--dmps-ink);
}
.unresolved-incidents .unresolved-incident a{ color:var(--dmps-blue); }

/* ---------- 5. Service board ---------- */
.components-section{ margin-top:0; }
.custom-header-container + .container > .components-section:first-child{ margin-top:0; }

.component-container{
  position:relative;
  padding:0 !important;       /* spacing lives on the rows */
  background:var(--dmps-card);
  border:1px solid var(--dmps-line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Info tooltips ("?") are drawn inside the card, which clips its corners.
   While one is open, stop clipping and lift that card above its neighbors
   (z-index 2 stays under the hero's 3, so the Subscribe dropdown still wins). */
.components-container:has(.tooltip.in),
.component-container:has(.tooltip.in){ overflow:visible !important; }
.component-container:has(.tooltip.in){ z-index:2; }
.component-container:not(.is-group):hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--dmps-line-strong) !important;
}

.component-inner-container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:62px;
  box-sizing:border-box;
  padding:14px 18px;
  border:none !important;
}
.component-inner-container .name{
  flex:0 1 auto;
  min-width:0;
  max-width:none !important;
  white-space:normal !important;   /* long names wrap instead of truncating */
  overflow:visible !important;
  text-overflow:clip !important;
  font-weight:800 !important;      /* SP core sets 500 at higher specificity */
  color:var(--dmps-ink);
  font-size:1rem;
  line-height:1.3;
}

/* If 90-day uptime bars are ever switched on, they drop to their own full-width line */
.component-inner-container .uptime-90-days-wrapper,
.component-inner-container .shared-partial{ flex:1 0 100%; margin-top:6px; }

/* Status pills: calm tint when healthy, solid fill when something is wrong */
.component-inner-container .component-status{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px 5px 9px;
  border-radius:999px;
  white-space:nowrap;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.02em;
  background:var(--st-green-tint);
  color:var(--st-green) !important;
}
.component-inner-container .component-status .dmps-status-icon{
  margin-right:0 !important;
  background-color:currentColor !important;
}
.component-inner-container.status-yellow .component-status{ background:var(--dmps-gold); color:#402F00 !important; }
.component-inner-container.status-orange .component-status{ background:var(--st-orange); color:#fff !important; }
.component-inner-container.status-red    .component-status{ background:var(--st-red);    color:#fff !important; }
.component-inner-container.status-blue   .component-status{ background:var(--st-blue);   color:#fff !important; }

/* "?" hints stay quiet until needed */
.component-inner-container .tooltip-base{
  flex:0 0 auto;
  width:17px; height:17px;
  border-radius:50%;
  border:1px solid #D5DEE8;
  background:#fff;
  color:#5F6B78;
  font-size:11px;
  font-weight:700;
  line-height:15px;
  text-align:center;
  padding:0;
  cursor:help;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.component-inner-container .tooltip-base:hover,
.component-inner-container .tooltip-base:focus-visible{
  background:#EAF1F8;
  color:var(--dmps-blue);
  border-color:var(--dmps-blue);
}

/* Board layout: two columns of services; groups run full width */
@media (min-width:760px){
  .components-container:not(.child-components-container){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-auto-flow:row dense;
    gap:16px 18px;
    align-items:stretch;
  }
  .components-container:not(.child-components-container) > .component-container{
    width:100% !important;
    margin:0 !important;
  }
  .components-container:not(.child-components-container) > .component-container.is-group{
    grid-column:1 / -1;
  }
}
@media (max-width:759px){
  .components-container:not(.child-components-container){ display:block !important; }
  .component-container{ margin-bottom:12px !important; }
}

/* Group cards */
.component-container.is-group{
  border-color:var(--dmps-line-strong) !important;
}
.component-container.is-group > .component-inner-container{
  cursor:pointer;
  padding:16px 20px;
  background:linear-gradient(180deg, #F8FBFE 0%, #EFF4FA 100%);
  box-shadow:inset 4px 0 0 var(--dmps-blue);
  transition:background .2s ease;
}
.component-container.is-group > .component-inner-container:hover{
  background:linear-gradient(180deg, #F2F7FD 0%, #E6EEF8 100%);
}
.component-container.is-group > .component-inner-container .name{
  color:var(--dmps-blue-deep);
  font-weight:900 !important;
  font-size:1.05rem;
  display:inline-flex;
  align-items:center;
}
/* Expand control: round button with a chevron that turns as the group opens */
.component-container.is-group .group-parent-indicator{
  flex:0 0 auto;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  margin-right:12px;
  border-radius:50%;
  background:var(--dmps-blue);
  color:#fff !important;
  font-size:12px !important;
  line-height:1;
  box-shadow:0 2px 6px rgba(1,54,104,.25);
  transform:rotate(-90deg);
  transition:transform .25s ease, background-color .2s ease;
}
.component-container.is-group .group-parent-indicator::before{ content:"\f078" !important; }
.component-container.is-group .group-parent-indicator:focus-visible{
  outline:3px solid var(--dmps-blue-deep) !important;
  outline-offset:3px;
  box-shadow:0 0 0 7px rgba(253,185,19,.9) !important;
}
.component-container.is-group.open .group-parent-indicator{ transform:rotate(0deg); background:var(--dmps-blue-deep); }

/* Open group: children become a compact two-column building grid */
.component-container.is-group .child-components-container{
  background:#F4F8FC;
  border-top:1px solid var(--dmps-line);
}
.layout-content .component-container.is-group.open .child-components-container{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 10px;
  padding:14px;
}
/* Big groups (the 60+ buildings) read A-Z down each column, like a directory */
.layout-content .component-container.is-group.open .child-components-container:has(> .component-inner-container:nth-child(9)){
  display:block !important;
  column-count:2;
  column-gap:10px;
  padding:14px 14px 6px;
}
.layout-content .component-container.is-group.open .child-components-container:has(> .component-inner-container:nth-child(9)) > .component-inner-container{
  break-inside:avoid;
  margin-bottom:8px;
}
.child-components-container .component-inner-container{
  margin-top:0 !important;      /* SP core adds 20px, which staggers the columns */
  min-height:0;
  padding:9px 10px 9px 14px;
  background:#fff;
  border:1px solid var(--dmps-line) !important;
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.child-components-container .component-inner-container:hover{
  border-color:var(--dmps-line-strong) !important;
  box-shadow:var(--shadow-sm);
}
.child-components-container .name{ font-weight:700 !important; font-size:.92rem; }
.child-components-container .component-status{ font-size:.72rem; padding:3px 10px 3px 8px; }
.child-components-container .component-status .dmps-status-icon{ width:12px !important; height:12px !important; }
/* the one building that needs attention lights up inside the grid */
.child-components-container .component-inner-container.status-yellow{ border-color:var(--dmps-gold) !important; background:#FFFBEE; }
.child-components-container .component-inner-container.status-orange{ border-color:var(--st-orange) !important; background:var(--st-orange-tint); }
.child-components-container .component-inner-container.status-red   { border-color:var(--st-red) !important;    background:var(--st-red-tint); }
.child-components-container .component-inner-container.status-blue  { border-color:var(--st-blue) !important;   background:var(--st-blue-tint); }

/* Impacted services: severity spine + breathing halo (pure CSS via :has(),
   self-maintaining; older browsers simply show the normal card) */
.component-container:has(.component-inner-container.status-blue),
.component-container:has(.component-inner-container.status-yellow),
.component-container:has(.component-inner-container.status-orange),
.component-container:has(.component-inner-container.status-red){
  border-color:rgba(var(--halo), .55) !important;
  box-shadow:0 0 12px 1px rgba(var(--halo), .20), var(--shadow-sm);
}
.component-container:has(.component-inner-container.status-blue)  { --halo:36,113,163; }
.component-container:has(.component-inner-container.status-yellow){ --halo:224,158,0; }
.component-container:has(.component-inner-container.status-orange){ --halo:176,74,0; }
.component-container:has(.component-inner-container.status-red)   { --halo:185,50,33; }
.component-container:has(.component-inner-container.status-blue)::before,
.component-container:has(.component-inner-container.status-yellow)::before,
.component-container:has(.component-inner-container.status-orange)::before,
.component-container:has(.component-inner-container.status-red)::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background:rgb(var(--halo));
  z-index:1;
}
.component-container.is-group:has(.component-inner-container.status-blue) > .component-inner-container,
.component-container.is-group:has(.component-inner-container.status-yellow) > .component-inner-container,
.component-container.is-group:has(.component-inner-container.status-orange) > .component-inner-container,
.component-container.is-group:has(.component-inner-container.status-red) > .component-inner-container{
  box-shadow:none;
  background:linear-gradient(90deg, rgba(var(--halo),.10), rgba(var(--halo),.02) 60%);
}
.component-container:has(.component-inner-container.status-yellow),
.component-container:has(.component-inner-container.status-orange),
.component-container:has(.component-inner-container.status-red){
  animation:dmps-service-halo 3.6s ease-in-out 1;
}
@keyframes dmps-service-halo{
  0%,100%{ box-shadow:0 0 12px 1px rgba(var(--halo), .20), var(--shadow-sm); }
  50%    { box-shadow:0 0 24px 5px rgba(var(--halo), .36), var(--shadow-sm); }
}
.component-inner-container.status-yellow .dmps-status-icon,
.component-inner-container.status-orange .dmps-status-icon,
.component-inner-container.status-red    .dmps-status-icon{
  animation:dmps-icon-breathe 2.2s ease-in-out 2;
}
@keyframes dmps-icon-breathe{
  0%,100%{ opacity:1; }
  50%    { opacity:.55; }
}

/* ---------- 6. Legend (shown by Statuspage when uptime bars are on) ---------- */
.component-statuses-legend{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0 8px;
}
.component-statuses-legend .breaker{ display:none; }
.legend-item, .legend li, .status-legend li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 13px;
  background:var(--dmps-card);
  border:1px solid var(--dmps-line);
  border-radius:999px;
  color:var(--dmps-muted);
  font-weight:700;
}
.dmps-status-icon{ flex:0 0 auto; }
.legend-item.status-green  .icon-indicator{ color:var(--st-green); }
.legend-item.status-yellow .icon-indicator{ color:var(--st-yellow); }
.legend-item.status-orange .icon-indicator{ color:var(--st-orange); }
.legend-item.status-red    .icon-indicator{ color:var(--st-red); }
.legend-item.status-blue   .icon-indicator{ color:var(--st-blue); }

/* ---------- 7. Past incidents: a timeline ---------- */
.incidents-list{ margin-top:56px; }
#past-incidents{
  font-family:var(--font-sans);
  color:var(--dmps-blue-deep);
  font-weight:900;
  letter-spacing:.01em;
  position:relative;
  padding-bottom:10px;
  margin-bottom:28px;
  scroll-margin-top:20px;
}
#past-incidents::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:64px; height:4px;
  background:var(--dmps-gold);
  border-radius:2px;
}

.incidents-list .status-day{
  position:relative;
  margin:0 !important;
  padding:0 0 26px 36px;
  border:0 !important;
}
/* rail */
.incidents-list .status-day::before{
  content:"";
  position:absolute;
  left:11px; top:8px; bottom:-8px;
  width:2px;
  background:#CFDBE8;
}
.incidents-list .status-day:last-child::before{ display:none; }
/* node */
.incidents-list .status-day::after{
  content:"";
  position:absolute;
  left:5px; top:3px;
  width:14px; height:14px;
  box-sizing:border-box;
  border-radius:50%;
  background:var(--dmps-surface);
  border:3px solid #B9C9DA;
}
.incidents-list .status-day:has(.incident-container)::after{
  width:18px; height:18px; left:3px; top:1px;
  background:#fff;
  border:4px solid var(--dmps-blue);
}
.incidents-list .status-day:has(.impact-none)::after    { border-color:var(--st-blue); }
.incidents-list .status-day:has(.impact-minor)::after   { border-color:var(--dmps-gold); }
.incidents-list .status-day:has(.impact-major)::after   { border-color:var(--st-orange); }
.incidents-list .status-day:has(.impact-critical)::after{ border-color:var(--st-red); }

.status-day .date{
  font-family:var(--font-sans);
  font-size:.8rem !important;
  font-weight:800 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dmps-muted);
  border:0 !important;
  margin:0 0 10px !important;
  padding:0 !important;
  line-height:20px;
}
/* quiet days (and "unresolved incident" pointer days) collapse to one line */
.incidents-list .status-day.no-incidents,
.incidents-list .status-day:not(:has(.incident-container)){
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 16px;
  padding-bottom:14px;
}
.incidents-list .status-day.no-incidents .date,
.incidents-list .status-day:not(:has(.incident-container)) .date{ margin:0 !important; min-width:116px; }
.status-day.no-incidents p.color-secondary,
.incidents-list .status-day:not(:has(.incident-container)) p{
  margin:0;
  color:var(--dmps-soft);
  font-style:normal;
  font-size:.88rem;
}

.incident-container{
  position:relative;
  background:var(--dmps-card);
  border:1px solid var(--dmps-line);
  border-left:5px solid var(--dmps-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:18px 22px;
  margin:0 0 12px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.incident-container:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.incident-container:has(.incident-title.impact-none)    { border-left-color:var(--st-blue); }
.incident-container:has(.incident-title.impact-minor)   { border-left-color:var(--dmps-gold); }
.incident-container:has(.incident-title.impact-major)   { border-left-color:var(--st-orange); }
.incident-container:has(.incident-title.impact-critical){ border-left-color:var(--st-red); }
.incident-title a{
  color:var(--dmps-blue) !important;
  font-weight:900;
  text-decoration:none;
}
.incident-title a:hover{ text-decoration:underline; }

/* Update entries: status chips (generic first, specific after - fixes v2.1,
   where every label rendered the same deep blue) */
.updates-container .update,
.unresolved-incident .updates .update{
  margin-top:12px;
  font-size:0;               /* hides the bare " - " separator; the chip replaces it */
  line-height:1.55;
}
.updates-container .update + .update{
  padding-top:12px;
  border-top:1px dashed var(--dmps-line);
}
.updates-container .update > span,
.unresolved-incident .updates .update > span{
  font-size:1rem;
  color:var(--dmps-ink);
}
.updates-container .update > small,
.unresolved-incident .updates .update > small{
  display:block;
  margin-top:4px;
  font-size:.8rem;
  color:var(--dmps-soft);
}
.updates-container .update > strong,
.unresolved-incident .updates .update > strong{
  display:table;
  margin:0 0 6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.4;
  background:#E8EEF5;
  color:var(--dmps-blue-deep);
}
.updates-container .update.resolved      > strong{ background:var(--st-green-tint);  color:var(--st-green); }
.updates-container .update.monitoring    > strong{ background:var(--st-blue-tint);   color:var(--st-blue-ink); }
.updates-container .update.identified    > strong{ background:var(--st-orange-tint); color:var(--st-orange); }
.updates-container .update.investigating > strong{ background:var(--st-red-tint);    color:var(--st-red); }
.unresolved-incident .updates .update > strong{
  background:rgba(var(--sev),.12);
  color:var(--dmps-ink);
}

/* ---------- 8. Statuspage footer row (history link + attribution) ---------- */
.page-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid var(--dmps-line) !important;
  padding-top:22px;
  margin-top:34px;
}
.page-footer .history-footer-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--dmps-card);
  border:1px solid var(--dmps-line-strong);
  box-shadow:var(--shadow-sm);
  color:var(--dmps-blue);
  font-weight:800;
  text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.page-footer .powered-by a{ color:var(--dmps-soft) !important; }  /* 4.8:1 on the page tint (stock gray was 4.1:1) */
.page-footer .history-footer-link:hover{
  border-color:var(--dmps-blue);
  box-shadow:var(--shadow-md);
  transform:translateX(-2px);
  text-decoration:none;
}

/* ---------- 9. Custom DMPS footer ---------- */
.dmps-footer{
  position:relative;
  font-family:var(--font-sans);
  background:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--dmps-blue) 0%, var(--dmps-blue-deep) 100%);
  border-top:5px solid var(--dmps-gold);
  color:#fff;
  margin-top:30px;
}
.dmps-footer-inner{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.dmps-footer-brand{ text-align:center; }
.dmps-footer-logo svg{
  width:132px; height:auto; display:block;
  border-radius:5px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.dmps-footer-tagline{
  margin:8px 0 0;
  font-family:'Gill Sans','Lato','Trebuchet MS',Calibri,Arial,sans-serif;
  color:var(--dmps-gold);
  font-weight:600;
  letter-spacing:.12em;
  font-size:.8rem;
}
.dmps-footer-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.dmps-footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.dmps-footer-links a:hover{
  color:var(--dmps-gold);
  border-color:var(--dmps-gold);
  background:rgba(253,185,19,.10);
}
.dmps-footer-base{
  border-top:1px solid rgba(255,255,255,.16);
  text-align:center;
  padding:11px 20px 14px;
}
.dmps-footer-base p{
  margin:1px 0;
  font-size:.78rem;
  color:rgba(255,255,255,.88);
  letter-spacing:.02em;
}
.dmps-footer-base .dmps-footer-org{ font-weight:700; color:#fff; }

/* ---------- 10. Micro-details ---------- */
.tooltipster-base{ font-family:var(--font-sans); }
.tooltipster-base .tooltipster-content{
  background:var(--dmps-blue-deep);
  color:#fff;
  border-radius:10px;
  font-size:.85rem;
  line-height:1.5;
  padding:10px 13px;
  box-shadow:var(--shadow-md);
}
.tooltipster-default{ background:var(--dmps-blue-deep); border-color:var(--dmps-blue-deep); border-radius:10px; }
.tooltipster-default .tooltipster-arrow span{ border-color:var(--dmps-blue-deep) !important; }

.dmps-tile-value,
.dmps-footer-links a,
.status-day .date,
.updates-container small,
.last-updated-stamp{
  font-variant-numeric:tabular-nums;
}
::selection{ background:var(--dmps-gold); color:var(--dmps-blue-deep); }

/* ---------- 11. Motion ---------- */
@keyframes dmps-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dmps-rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes dmps-draw{ to{ transform:scaleX(1); } }
@keyframes dmps-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
@keyframes dmps-ping{
  0%  { opacity:0;  outline-offset:0; }
  8%  { opacity:.9; }
  100%{ opacity:0;  outline-offset:190px; }
}
@keyframes dmps-hazard{ to{ background-position:40px 0; } }
@keyframes dmps-card-in{
  from{ opacity:0; translate:0 14px; }
  to{ opacity:1; translate:0 0; }
}
/* Service cards settle in on first paint, in reading order */
@media (prefers-reduced-motion:no-preference){
  .components-container:not(.child-components-container) > .component-container{
    animation:dmps-card-in .45s ease-out backwards;
  }
  .components-container > .component-container:nth-child(2) { animation-delay:.03s; }
  .components-container > .component-container:nth-child(3) { animation-delay:.06s; }
  .components-container > .component-container:nth-child(4) { animation-delay:.09s; }
  .components-container > .component-container:nth-child(5) { animation-delay:.12s; }
  .components-container > .component-container:nth-child(6) { animation-delay:.15s; }
  .components-container > .component-container:nth-child(7) { animation-delay:.18s; }
  .components-container > .component-container:nth-child(8) { animation-delay:.21s; }
  .components-container > .component-container:nth-child(n+9){ animation-delay:.24s; }
  /* impacted cards keep their halo breathing */
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-yellow),
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-orange),
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-red){
    animation:dmps-card-in .45s ease-out backwards, dmps-service-halo 3.6s .5s ease-in-out 1;
  }
}

/* ---------- 11b. Motion layer (v3.1) ----------
   Rules of the road: load choreography runs once; anything ambient stops
   within 5 seconds (WCAG 2.2.2); everything else is user-driven (hover,
   focus, opening a group, scrolling). All of it sits behind
   prefers-reduced-motion:no-preference.
   Entrances fill "backwards", never "both": a finished entrance must not leave
   a transform behind, or it traps the incident Subscribe modal under its
   backdrop and clips tooltips (v3.1.1 fix). */
:root{
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@keyframes dmps-drop{
  from{ opacity:0; translate:0 -18px; }
  to  { opacity:1; translate:0 0; }
}
@keyframes dmps-sheen{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(220%); }
}
@keyframes dmps-sheen-again{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(220%); }
}
@keyframes dmps-pulse-again{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
@keyframes dmps-bell{
  0%,100%{ transform:rotate(0); }
  15%{ transform:rotate(18deg); }
  30%{ transform:rotate(-14deg); }
  45%{ transform:rotate(10deg); }
  60%{ transform:rotate(-6deg); }
  75%{ transform:rotate(3deg); }
}
@keyframes dmps-ring{
  0%,100%{ transform:rotate(0); }
  10%,30%,50%{ transform:rotate(-14deg); }
  20%,40%,60%{ transform:rotate(14deg); }
  70%{ transform:rotate(0); }
}
@keyframes dmps-tilt{
  0%{ transform:rotate(0) scale(1); }
  40%{ transform:rotate(-12deg) scale(1.18); }
  70%{ transform:rotate(6deg) scale(1.08); }
  100%{ transform:rotate(0) scale(1); }
}
@keyframes dmps-turn{
  0%{ transform:rotate(0); }
  45%{ transform:rotate(-40deg); }
  75%{ transform:rotate(8deg); }
  100%{ transform:rotate(0); }
}
@keyframes dmps-pop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}
@keyframes dmps-halo-again{
  0%,100%{ box-shadow:0 0 12px 1px rgba(var(--halo), .20), var(--shadow-sm); }
  50%    { box-shadow:0 0 24px 5px rgba(var(--halo), .36), var(--shadow-sm); }
}
@keyframes dmps-child-in{
  from{ opacity:0; translate:0 8px; scale:.98; }
  to  { opacity:1; translate:0 0; scale:1; }
}
@keyframes dmps-rail{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes dmps-node{ from{ scale:.3; opacity:0; } 70%{ scale:1.15; opacity:1; } to{ scale:1; opacity:1; } }
@keyframes dmps-slide-in{ from{ opacity:0; translate:0 22px; } to{ opacity:1; translate:0 0; } }   /* rises, so phones never scroll sideways */
@keyframes dmps-underline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:no-preference){
  /* The status layer drops in just after the hero lands */
  .layout-content.status-index .custom-header-container + .container > .page-status,
  .layout-content.status-index .custom-header-container + .container > .unresolved-incidents{
    animation:dmps-drop .6s .32s var(--ease-spring) backwards;
  }

  /* One light sweep across the status banner; hover sends another */
  .layout-content.status.status-index .page-status::after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0;
    width:45%;
    pointer-events:none;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.26) 50%, transparent 100%);
    transform:translateX(-120%);
    animation:dmps-sheen 1.3s 1s var(--ease-out) 1 both;
  }
  .layout-content.status.status-index .page-status:hover::after{ animation:dmps-sheen-again 1.1s var(--ease-out) 1 both; }
  .page-status.status-none:hover .status::before{ animation:dmps-pulse-again 1.4s ease-out 1; }

  /* Subscribe: the bell rings and the hero keeps broadcasting while you hover */
  #show-updates-dropdown::before{ transform-origin:50% 10%; }
  #show-updates-dropdown:hover::before,
  #show-updates-dropdown:focus-visible::before{ animation:dmps-bell .8s ease-in-out 1; }
  .dmps-hero:has(#show-updates-dropdown:hover)::after,
  .dmps-hero:has(#show-updates-dropdown:focus-visible)::after{
    animation:dmps-ping 2s cubic-bezier(.2,.65,.3,1) infinite;
  }

  /* Tiles: each icon acts out its job */
  .dmps-tile-icon svg{ transform-origin:50% 50%; }
  .dmps-tiles .dmps-tile:nth-child(1):hover .dmps-tile-icon svg,
  .dmps-tiles .dmps-tile:nth-child(1):focus-visible .dmps-tile-icon svg{ animation:dmps-ring .7s ease-in-out 1; }
  .dmps-tiles .dmps-tile:nth-child(2):hover .dmps-tile-icon svg,
  .dmps-tiles .dmps-tile:nth-child(2):focus-visible .dmps-tile-icon svg{ animation:dmps-tilt .6s var(--ease-spring) 1; }
  .dmps-tiles .dmps-tile:nth-child(3):hover .dmps-tile-icon svg,
  .dmps-tiles .dmps-tile:nth-child(3):focus-visible .dmps-tile-icon svg{ animation:dmps-turn .7s var(--ease-out) 1; }

  /* Service cards: the status icon pops when you point at it */
  .component-container:not(.is-group):hover .component-status .dmps-status-icon{ animation:dmps-pop .45s var(--ease-spring) 1; }
  /* Impacted cards re-pulse on hover */
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-yellow):hover,
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-orange):hover,
  .components-container:not(.child-components-container) > .component-container:has(.component-inner-container.status-red):hover{
    animation:dmps-halo-again 1.8s ease-in-out 1;
  }

  /* Active incident: stripes drift again while you hover the band */
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title:hover{
    animation:dmps-hazard 2.5s linear infinite;
  }

  /* Opening a group cascades the buildings in */
  .component-container.is-group.open .child-components-container > .component-inner-container{
    animation:dmps-child-in .32s var(--ease-out) backwards;
  }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+5) { animation-delay:.03s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+9) { animation-delay:.06s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+13){ animation-delay:.09s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+17){ animation-delay:.12s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+21){ animation-delay:.15s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+25){ animation-delay:.18s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+29){ animation-delay:.21s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+33){ animation-delay:.24s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+41){ animation-delay:.28s; }
  .component-container.is-group.open .child-components-container > .component-inner-container:nth-child(n+51){ animation-delay:.32s; }

  /* Scroll-driven history (Chrome and Edge today; other browsers show it static) */
  @supports (animation-timeline: view()){
    #past-incidents{ view-timeline-name:--dmps-pi; }
    #past-incidents::after{
      transform-origin:left center;
      animation:dmps-underline linear both;
      animation-timeline:--dmps-pi;
      animation-range:entry 30% cover 45%;
    }
    .incidents-list .status-day{ view-timeline-name:--dmps-day; }
    .incidents-list .status-day::before{
      transform-origin:top center;
      animation:dmps-rail linear both;
      animation-timeline:--dmps-day;
      animation-range:entry 10% cover 40%;
    }
    .incidents-list .status-day::after{
      animation:dmps-node linear both;
      animation-timeline:--dmps-day;
      animation-range:entry 0% entry 90%;
    }
    .incidents-list .incident-container{
      animation:dmps-slide-in linear backwards;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
  }
}

/* Printing never waits on scroll-driven motion */
@media print{
  .incidents-list .incident-container,
  .incidents-list .status-day::before,
  .incidents-list .status-day::after,
  #past-incidents::after{ animation:none !important; }
}

/* ---------- 12. Responsive + reduced motion ---------- */
@media (max-width:700px){
  .dmps-hero-inner{ padding:26px 0 28px; }
  .dmps-hero-top{
    flex-direction:column;
    text-align:center;
    gap:14px;
    margin-bottom:22px;
  }
  .dmps-hero-subscribe{ margin-left:0; margin-top:6px; }
  .updates-dropdown-container{ top:0 !important; }  /* SP core nudges it up 50%; on phones that parks the pill on the title underline */
  .dmps-hero-eyebrow{ display:none; }
  .dmps-hero-title::after{ margin:9px auto 0; transform-origin:center; }
  .dmps-hero::before{
    background:
      repeating-radial-gradient(circle at 50% 0, rgba(255,255,255,.09) 0 1.5px, transparent 1.5px 48px),
      radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.5px) 0 0 / 20px 20px;
    -webkit-mask-image:radial-gradient(420px 360px at 50% 0, #000 0%, rgba(0,0,0,.4) 50%, transparent 80%);
            mask-image:radial-gradient(420px 360px at 50% 0, #000 0%, rgba(0,0,0,.4) 50%, transparent 80%);
  }
  .dmps-hero::after{ display:none; }
  .dmps-tiles{ grid-template-columns:1fr; gap:12px; }
  .dmps-tile{
    flex-direction:row;
    text-align:left;
    gap:14px;
    padding:13px 16px;
  }
  .dmps-tile-icon{ width:40px; height:40px; }
  .dmps-tile .dmps-tile-text{ align-items:flex-start; gap:2px; }
  .dmps-swoosh svg{ height:36px; }
  .layout-content.status-index .custom-header-container + .container{ margin-top:-20px !important; }
  .layout-content.status.status-index .page-status{ padding:18px 20px; }
  .page-status .status{ font-size:1.15rem !important; }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title{ padding:14px 16px; }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a.actual-title{ font-size:1.12rem; }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates{ padding:16px !important; }
  .component-inner-container{ padding:13px 14px; }
  .layout-content .component-container.is-group.open .child-components-container,
  .layout-content .component-container.is-group.open .child-components-container:has(> .component-inner-container:nth-child(9)){
    display:grid !important;
    grid-template-columns:1fr;
    column-count:auto;
    gap:6px;
    padding:10px;
  }
  .layout-content .component-container.is-group.open .child-components-container:has(> .component-inner-container:nth-child(9)) > .component-inner-container{ margin-bottom:0; }
  .incidents-list .status-day{ padding-left:30px; }
  .incidents-list .status-day.no-incidents .date{ min-width:0; }
  .incident-container{ padding:16px 16px; }
  .dmps-footer-inner{
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
  .dmps-footer-links{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .dmps-hero-eyebrow, .dmps-hero-title, .dmps-tile, #show-updates-dropdown{ animation:none; }
  .dmps-hero-title::after{ transform:scaleX(1); animation:none; }
  .dmps-hero::after{ display:none; }
  .page-status.status-none .status::before{ animation:none; }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title,
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title::before{ animation:none; }
  .dmps-tiles .dmps-tile:nth-child(2){
    animation:none;
    box-shadow:0 0 0 4px rgba(253,185,19,.35), 0 10px 24px -10px rgba(0,16,40,.55);
  }
}

/* ---------- 13. All-clear mode (v3.2) ----------
   When, and only when, nothing is wrong anywhere, the whole page lights up green.
   All four must hold (pure CSS via :has(); any one failing turns it off):
     1. Overall status is All Systems Operational (body.status-none)
     2. No open incident (.unresolved-incident)
     3. No maintenance notice outside the history list
     4. Every service and building row is operational (.status-green)
   Motion: a one-time power-up that finishes about 3.4 seconds after load
   (WCAG 2.2.2), then a steady glow. Endless motion runs only while a card or
   the banner is hovered or focused. Reduce Motion shows the steady glow only.
   Screen only (never printed). Original design: no third-party characters or marks. */
@property --ac-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@property --ac-edge{ syntax:'<number>'; inherits:false; initial-value:1; }

@keyframes dmps-ac-charge{
  0%  { opacity:1; background-position:-360px 50%, calc(100% + 360px) 50%, 50% 50%; background-size:300px 100%, 300px 100%, 0% 100%; }
  58% { opacity:1; background-position:50% 50%, 50% 50%, 50% 50%; background-size:300px 100%, 300px 100%, 0% 100%; }
  72% { opacity:1; background-position:50% 50%, 50% 50%, 50% 50%; background-size:0px 100%, 0px 100%, 115% 100%; }
  100%{ opacity:0; background-position:50% 50%, 50% 50%, 50% 50%; background-size:0px 100%, 0px 100%, 170% 100%; }
}
@keyframes dmps-ac-field{
  from{ opacity:0; transform:scale(.4); }
  to  { opacity:1; transform:none; }
}
@keyframes dmps-ac-tile{
  0%  { box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 0 0 rgba(var(--ac-core),0), 0 10px 24px -10px rgba(0,16,40,.55); }
  35% { box-shadow:0 0 0 3px rgba(var(--ac-core),.95), 0 0 36px 9px rgba(var(--ac-core),.6), 0 10px 24px -10px rgba(0,16,40,.55); }
  100%{ box-shadow:0 0 0 1px rgba(var(--ac-core),.55), 0 0 22px 3px rgba(var(--ac-core),.34), 0 10px 24px -10px rgba(0,16,40,.55); }
}
@keyframes dmps-ac-bloom{
  0%  { box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 0 0 rgba(var(--ac-glow),0), 0 0 0 0 rgba(var(--ac-core),0), var(--shadow-lg); }
  22% { box-shadow:0 0 0 3px rgba(var(--ac-core),1), 0 0 48px 14px rgba(var(--ac-glow),.9), 0 0 0 0 rgba(var(--ac-core),.9), var(--shadow-lg); }
  62% { box-shadow:0 0 0 2px rgba(var(--ac-core),.7), 0 0 34px 8px rgba(var(--ac-glow),.6), 0 0 22px 74px rgba(var(--ac-core),0), var(--shadow-lg); }
  100%{ box-shadow:0 0 0 2px rgba(var(--ac-core),.6), 0 0 30px 6px rgba(var(--ac-glow),.5), 0 0 80px 18px rgba(var(--ac-glow),.2), var(--shadow-lg); }
}
@keyframes dmps-ac-shock{
  0%  { box-shadow:0 0 0 0 rgba(var(--ac-core),.95), 0 0 0 0 rgba(255,255,255,.85), 0 0 0 3px rgba(var(--ac-core),.6), 0 0 18px 5px rgba(var(--ac-core),.75); }
  100%{ box-shadow:0 0 0 26px rgba(var(--ac-core),0), 0 0 0 44px rgba(255,255,255,0), 0 0 0 3px rgba(var(--ac-core),.6), 0 0 18px 5px rgba(var(--ac-core),.75); }
}
@keyframes dmps-ac-shock-again{
  0%  { box-shadow:0 0 0 0 rgba(var(--ac-core),.95), 0 0 0 0 rgba(255,255,255,.85), 0 0 0 3px rgba(var(--ac-core),.6), 0 0 18px 5px rgba(var(--ac-core),.75); }
  100%{ box-shadow:0 0 0 26px rgba(var(--ac-core),0), 0 0 0 44px rgba(255,255,255,0), 0 0 0 3px rgba(var(--ac-core),.6), 0 0 18px 5px rgba(var(--ac-core),.75); }
}
@keyframes dmps-ac-card{
  0%  { box-shadow:0 0 0 0 rgba(var(--ac-glow),0), 0 0 0 0 rgba(var(--ac-glow),0), var(--shadow-sm); }
  40% { box-shadow:0 0 0 2px rgba(var(--ac-core),.9), 0 0 30px 7px rgba(var(--ac-glow),.6), var(--shadow-sm); }
  100%{ box-shadow:0 0 0 1px rgba(var(--ac-glow),.22), 0 0 18px 2px rgba(var(--ac-glow),.28), var(--shadow-sm); }
}
@keyframes dmps-ac-trace{
  0%  { --ac-angle:0deg; opacity:0; }
  12% { opacity:1; }
  78% { opacity:1; }
  100%{ --ac-angle:360deg; opacity:0; }
}
@keyframes dmps-ac-orbit{
  from{ --ac-angle:0deg; opacity:1; }
  to  { --ac-angle:360deg; opacity:1; }
}
@keyframes dmps-ac-child{
  0%  { box-shadow:0 0 0 1px rgba(var(--ac-core),.95), 0 0 18px 3px rgba(var(--ac-core),.75); }
  100%{ box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 10px 0 rgba(var(--ac-glow),.16); }
}
@keyframes dmps-ac-edge{ from{ --ac-edge:0; } to{ --ac-edge:1; } }

@media screen{
  body.status-none:has(.layout-content.status-index):not(:has(.unresolved-incident, [class*="scheduled-maintenance"]:not(.incidents-list *), .component-inner-container:not(.status-green))){
    --ac-on:1;                  /* test hook */
    --ac-core:57,255,136;       /* energy highlight */
    --ac-glow:16,185,90;        /* emerald halo on light surfaces */
    --sig:57,255,136;           /* hero status line + ping follow the energy color */

    /* Hero: brighter status light, green signal field, glowing tiles */
    & .dmps-hero{
      box-shadow:inset 0 4px 0 rgb(var(--ac-core)), inset 0 18px 26px -16px rgba(var(--ac-core),.85);
    }
    & .dmps-hero::before{
      background:
        repeating-radial-gradient(circle at calc(50% + min(42vw,380px)) 62px,
          rgba(var(--ac-core),.22) 0 1.5px, transparent 1.5px 58px),
        radial-gradient(rgba(var(--ac-core),.16) 1px, transparent 1.5px) 0 0 / 22px 22px;
    }
    & .dmps-tile{
      box-shadow:0 0 0 1px rgba(var(--ac-core),.55), 0 0 22px 3px rgba(var(--ac-core),.34), 0 10px 24px -10px rgba(0,16,40,.55);
    }
    & .dmps-tiles .dmps-tile:hover{
      box-shadow:0 0 0 2px rgba(var(--ac-core),.85), 0 0 32px 7px rgba(var(--ac-core),.5), 0 16px 30px -12px rgba(0,16,40,.6);
    }
    & .layout-content.status-index .custom-header-container{ position:relative; }

    /* Banner: lit from within, with an energy disc */
    & .layout-content.status.status-index .page-status{
      box-shadow:0 0 0 2px rgba(var(--ac-core),.6), 0 0 30px 6px rgba(var(--ac-glow),.5), 0 0 80px 18px rgba(var(--ac-glow),.2), var(--shadow-lg);
    }
    & .page-status.status-none .status::before{
      box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 0 0 rgba(255,255,255,0), 0 0 0 3px rgba(var(--ac-core),.6), 0 0 18px 5px rgba(var(--ac-core),.75);
    }

    /* Service board: every card, pill, and building row glows */
    & .component-container{
      border-color:rgba(var(--ac-glow),.55) !important;
      box-shadow:0 0 0 1px rgba(var(--ac-glow),.22), 0 0 18px 2px rgba(var(--ac-glow),.28), var(--shadow-sm);
    }
    & .component-container:not(.is-group):hover{
      border-color:rgba(var(--ac-glow),.85) !important;
      box-shadow:0 0 0 1px rgba(var(--ac-glow),.4), 0 0 30px 6px rgba(var(--ac-glow),.42), var(--shadow-md);
    }
    & .component-container.is-group > .component-inner-container{
      box-shadow:inset 4px 0 0 rgb(var(--ac-glow));
    }
    & .component-inner-container .component-status{
      box-shadow:0 0 0 1px rgba(var(--ac-glow),.3), 0 0 12px rgba(var(--ac-glow),.35);
    }
    & .child-components-container .component-inner-container{
      border-color:rgba(var(--ac-glow),.4) !important;
      box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 10px 0 rgba(var(--ac-glow),.16);
    }
    & .child-components-container .component-inner-container:hover{
      border-color:rgba(var(--ac-glow),.85) !important;
      box-shadow:0 0 0 0 rgba(var(--ac-core),0), 0 0 14px 1px rgba(var(--ac-glow),.42);
    }
    /* energy trace layer (drawn only while animating) */
    & .components-container:not(.child-components-container) > .component-container::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:2px;
      background:conic-gradient(from var(--ac-angle),
        rgba(var(--ac-core),0) 0turn, rgba(var(--ac-core),0) .58turn,
        rgba(var(--ac-glow),.9) .78turn, rgba(255,255,255,.95) .82turn,
        rgba(var(--ac-core),1) .85turn, rgba(var(--ac-core),0) .9turn, rgba(var(--ac-core),0) 1turn);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask-composite:exclude;
      opacity:0;
      pointer-events:none;
    }

    /* History timeline: the rail and quiet days glow */
    & .incidents-list .status-day::before{
      background:linear-gradient(180deg, rgb(var(--ac-glow)), rgba(var(--ac-glow),.35));
      box-shadow:0 0 10px rgba(var(--ac-core),.55);
    }
    & .incidents-list .status-day:not(:has(.incident-container))::after{
      border-color:rgb(var(--ac-glow));
      box-shadow:0 0 10px rgba(var(--ac-core),.7);
    }
    & .dmps-footer{ box-shadow:0 -12px 34px -16px rgba(var(--ac-core),.9); }

    /* Page edges: side light in the gutters only (never behind text) */
    @media (min-width:1100px){
      background-image:
        linear-gradient(90deg, rgba(var(--ac-glow), calc(.26 * var(--ac-edge))), rgba(var(--ac-glow),0) calc((100vw - 1000px) / 2)),
        linear-gradient(270deg, rgba(var(--ac-glow), calc(.26 * var(--ac-edge))), rgba(var(--ac-glow),0) calc((100vw - 1000px) / 2)) !important;
      background-attachment:fixed !important;
    }

    @media (max-width:700px){
      & .dmps-hero::before{
        background:
          repeating-radial-gradient(circle at 50% 0, rgba(var(--ac-core),.16) 0 1.5px, transparent 1.5px 48px),
          radial-gradient(rgba(var(--ac-core),.14) 1px, transparent 1.5px) 0 0 / 20px 20px;
      }
      & .component-container{
        box-shadow:0 0 0 1px rgba(var(--ac-glow),.22), 0 0 12px 1px rgba(var(--ac-glow),.26), var(--shadow-sm);
      }
    }

    /* ---- Power-up (once per load) and hover energy ---- */
    @media (prefers-reduced-motion:no-preference){
      animation:dmps-ac-edge 1.5s 1.9s ease-out backwards;

      /* 1. The status light ignites: two charges race in and flash at the center */
      & .layout-content.status-index .custom-header-container::before{
        content:"";
        position:absolute;
        left:0; right:0; top:-7px;
        height:18px;
        z-index:4;
        pointer-events:none;
        background:
          radial-gradient(closest-side, #fff, rgba(var(--ac-core),.95) 38%, rgba(var(--ac-core),0)),
          radial-gradient(closest-side, #fff, rgba(var(--ac-core),.95) 38%, rgba(var(--ac-core),0)),
          linear-gradient(90deg, rgba(var(--ac-core),0), rgba(var(--ac-core),.9) 30%, #fff 50%, rgba(var(--ac-core),.9) 70%, rgba(var(--ac-core),0));
        background-repeat:no-repeat;
        opacity:0;
        animation:dmps-ac-charge 1.35s .15s cubic-bezier(.55,.05,.25,1) both;
      }
      /* 2. The signal field blooms out from Subscribe; tiles light up */
      & .dmps-hero::before{
        transform-origin:calc(50% + min(42vw,380px)) 62px;
        animation:dmps-ac-field 1.6s .45s var(--ease-out) backwards;
      }
      & .dmps-tile{ animation:dmps-rise .5s ease-out backwards, dmps-ac-tile 1.2s ease-out backwards; }
      & .dmps-tiles .dmps-tile:nth-child(1){ animation-delay:.16s, .95s; }
      & .dmps-tiles .dmps-tile:nth-child(2){ animation:dmps-rise .5s ease-out backwards, dmps-ac-tile 1.2s ease-out backwards; animation-delay:.26s, 1.05s; }
      & .dmps-tiles .dmps-tile:nth-child(3){ animation-delay:.36s, 1.15s; }

      /* 3. The banner flares and throws a shockwave; the disc pulses twice */
      & .layout-content.status-index .custom-header-container + .container > .page-status{
        animation:dmps-drop .6s .32s var(--ease-spring) backwards, dmps-ac-bloom 1.9s .85s var(--ease-out) backwards;
      }
      & .layout-content.status.status-index .page-status::after{
        background:linear-gradient(100deg, transparent 0%, rgba(var(--ac-core),.35) 40%, rgba(255,255,255,.55) 50%, rgba(var(--ac-core),.35) 60%, transparent 100%);
      }
      & .page-status.status-none .status::before{ animation:dmps-ac-shock 1.15s .95s ease-out 2; }
      & .page-status.status-none:hover .status::before{
        animation:dmps-ac-shock 1.15s .95s ease-out 2, dmps-ac-shock-again 1.15s ease-out infinite;
      }

      /* 4. Cards ignite in reading order: energy traces each border, then the halo settles */
      & .components-container:not(.child-components-container) > .component-container{
        animation:dmps-card-in .45s ease-out backwards, dmps-ac-card 1.25s ease-out backwards;
        animation-delay:min(calc(var(--ai, 0) * .03s), .24s), calc(1.05s + var(--ai, 0) * .075s);
      }
      & .components-container:not(.child-components-container) > .component-container::after{
        animation:dmps-ac-trace 1.15s calc(1.05s + var(--ai, 0) * .075s) cubic-bezier(.4,.1,.3,1) both;
      }
      & .components-container:not(.child-components-container) > .component-container:hover::after,
      & .components-container:not(.child-components-container) > .component-container:focus-within::after{
        animation:dmps-ac-trace 1.15s calc(1.05s + var(--ai, 0) * .075s) cubic-bezier(.4,.1,.3,1) both,
                  dmps-ac-orbit 1.6s linear infinite;
      }
      & .components-container:not(.child-components-container) > .component-container:nth-child(2) { --ai:1; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(3) { --ai:2; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(4) { --ai:3; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(5) { --ai:4; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(6) { --ai:5; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(7) { --ai:6; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(8) { --ai:7; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(9) { --ai:8; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(10){ --ai:9; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(11){ --ai:10; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(12){ --ai:11; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(13){ --ai:12; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(14){ --ai:13; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(15){ --ai:14; }
      & .components-container:not(.child-components-container) > .component-container:nth-child(n+16){ --ai:15; }

      /* Opening a group: each building flashes as it cascades in (user-initiated) */
      & .component-container.is-group.open .child-components-container > .component-inner-container{
        animation-name:dmps-child-in, dmps-ac-child;
        animation-duration:.32s, 1.1s;
        animation-timing-function:var(--ease-out), ease-out;
        animation-fill-mode:backwards, backwards;
      }
    }
    @media (prefers-reduced-motion:no-preference) and (max-width:700px){
      & .dmps-hero::before{ transform-origin:50% 0; }
    }
  }
}