/* ==========================================================================
   DMPS STATUS PAGE — CUSTOM CSS v2.1
   Des Moines Public Schools Technology Organization
   Paste into: Statuspage > Customize page > Custom CSS
   Pairs with: Custom Header HTML v2 + Custom Footer HTML v2
   ========================================================================== */

/* ---------- 1. Brand tokens ---------- */
:root{
  --dmps-blue:#00467F;        /* PMS 541 */
  --dmps-blue-deep:#013668;
  --dmps-gold:#FDB913;        /* PMS 130 */
  --dmps-ink:#1B2B3A;
  --dmps-body:#404040;
  --dmps-muted:#5F6062;
  --dmps-line:#DFE7F0;
  --dmps-surface:#EDF2F8;
  --dmps-card:#FFFFFF;

  /* accessible status colors (text on white) */
  --st-green:#1E7B3C;
  --st-yellow:#8A6400;
  --st-orange:#B04A00;
  --st-red:#B93221;
  --st-blue:#2471A3;

  --font-sans:'Lato','Gill Sans','Trebuchet MS',Calibri,Arial,sans-serif;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(1,54,104,.06),0 1px 3px rgba(1,54,104,.08);
  --shadow-md:0 10px 28px rgba(1,54,104,.14);
  --container:850px;
}

/* ---------- 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); }

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{
  background:var(--dmps-blue);
  color:#fff;
  font-family:var(--font-sans);
}
.dmps-hero-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:30px 24px 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 2px 10px rgba(0,0,0,.25);
}
.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 both;
}
.dmps-hero-title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:#fff;
  animation:dmps-rise .55s .08s ease-out both;
}
/* gold underline draws in after the title lands */
.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; }

/* Row 2: three symmetric 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:var(--radius);
  border-bottom:3px solid var(--dmps-gold);
  box-shadow:var(--shadow-sm);
  padding:18px 14px 15px;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
  animation:dmps-rise .5s ease-out both;
}

/* Side tiles (phone numbers): on hover, thin gold rails climb the sides and a
   faint static halo fades in — a quieter cousin of the Submit tile's glow */
.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 10px 1px rgba(253,185,19,.20), var(--shadow-md);
}
.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: faint gold fill, ring + breathing halo */
.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 both,
    dmps-halo 3s 1.2s ease-out infinite;
}
.dmps-tiles .dmps-tile:nth-child(2) .dmps-tile-icon{
  background:rgba(253,185,19,.22);
}

/* Hover/focus: subtle, same design language as the side tiles — the icon
   circle fills brand blue with a white glyph, the cream fill warms one step,
   the value deepens. The halo and lift carry the rest. */
.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; /* one warm step from the resting #FFFBEE */
  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), var(--shadow-sm); }
  55% { box-shadow:0 0 0 13px rgba(253,185,19,0), var(--shadow-sm); }
  100%{ box-shadow:0 0 0 0 rgba(253,185,19,0), var(--shadow-sm); }
}
.dmps-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.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:.6rem 1.15rem;
  border-radius:10px;
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.85rem;
  color:#fff !important;
  background:transparent !important;
  border:2px solid var(--dmps-gold) !important; /* gold ring */
  text-decoration:none !important;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease, transform .15s ease;
  animation:dmps-fade .5s .3s ease-out both;
}
#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;
  transform:translateY(-1px);
}
#show-updates-dropdown::before{
  content:"";
  width:1em; height:1em;
  background:var(--dmps-gold); /* gold bell at rest */
  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); /* bell flips blue on the gold fill */
}

/* Gold swoosh divider — echoes the curve in the DMPS logo */
.dmps-swoosh{ line-height:0; background:var(--dmps-surface); }
.dmps-swoosh svg{ display:block; width:100%; height:56px; }

/* ---------- 4. Overall-status banner ---------- */
.page-status{
  border-radius:var(--radius);
  padding:20px 26px;
  box-shadow:var(--shadow-sm);
  margin-top:26px;
}
.page-status .status{
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:12px;
  text-shadow:none;
}
.page-status .last-updated-stamp{ opacity:.85; }

/* Banner state colors.
   PRODUCTION NOTE: Statuspage's admin color settings inject rules like
   ".layout-content.status.status-index .page-status.status-none" (6 classes) —
   we must match that prefix AND use !important to own these backgrounds. */

/* Healthy = bright spring green (not Statuspage olive) */
.page-status.status-none,
.layout-content.status.status-index .page-status.status-none{
  background-color:#27A046 !important;
}
.page-status.status-none .status::before{
  content:"";
  flex:0 0 auto;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:dmps-pulse 2.6s ease-out infinite;
}

/* Degraded / partial / major / maintenance banners */
.page-status.status-minor,
.page-status.status-yellow,
.layout-content.status.status-index .page-status.status-minor{
  background-color:var(--dmps-gold) !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;
}
.page-status.status-critical,
.page-status.status-red,
.layout-content.status.status-index .page-status.status-critical{
  background-color:#B93221 !important;
}
.page-status.status-maintenance,
.page-status.status-blue,
.layout-content.status.status-index .page-status.status-maintenance{
  background-color:var(--st-blue) !important;
}

/* Faint logo-swoosh watermark on every banner state (must out-rank the
   admin-color background shorthand, hence prefix + !important) */
.page-status,
.layout-content.status.status-index .page-status{
  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='.07' d='M0 125 C 90 70 190 30 288 12 L 288 125 Z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right -24px bottom !important;
  background-size:280px auto !important;
}

/* If Statuspage ever populates the timestamp on a bright banner, plate it
   for contrast (it ships empty today) */
.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;
}

/* Unresolved-incident banners: readable ink on white card, colored spine */
.unresolved-incidents .unresolved-incident{
  background:var(--dmps-card);
  border:1px solid var(--dmps-line);
  border-left:5px solid var(--dmps-muted);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:16px 20px;
  color:var(--dmps-ink) !important;
  text-shadow:none;
}
.unresolved-incidents .unresolved-incident a{
  color:var(--dmps-blue) !important;
  text-decoration:none;
}
.unresolved-incidents .unresolved-incident a:hover{ text-decoration:underline; }
.unresolved-incident.impact-none{ border-left-color:var(--st-blue); }
.unresolved-incident.impact-minor{ border-left-color:var(--dmps-gold); }
.unresolved-incident.impact-major{ border-left-color:#B04A00; }
.unresolved-incident.impact-critical{ border-left-color:#B93221; }
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title{
  text-shadow:none;
}

/* ---------- 5. Component cards ---------- */
.components-section{ margin-top:6px; }

.component-container{
  background:var(--dmps-card);
  border:1px solid var(--dmps-line) !important;
  border-radius:var(--radius) !important; /* SP core sets corner-specific 4px radii at higher specificity */
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.component-container:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#C9D8E8 !important;
}

.component-inner-container{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  padding:15px 18px;
  border:none !important;
}
.component-inner-container .name{
  flex:0 1 auto;
  font-weight:700 !important; /* SP core sets 500 at higher specificity */
  color:var(--dmps-ink);
  font-size:.98rem;
}
.component-status{
  margin-left:auto;
  white-space:nowrap;
  font-weight:700;
  font-size:.88rem;
  color:var(--dmps-muted) !important;
}
/* Semantic status text colors (icons from the header script carry shape too) */
.component-inner-container.status-green  .component-status{ color:var(--st-green) !important; }
.component-inner-container.status-yellow .component-status{ color:var(--st-yellow) !important; }
.component-inner-container.status-orange .component-status{ color:var(--st-orange) !important; }
.component-inner-container.status-red    .component-status{ color:var(--st-red) !important; }
.component-inner-container.status-blue   .component-status{ color:var(--st-blue) !important; }

/* "?" tooltip trigger — quiet circled hint */
.component-inner-container .tooltip-base{
  flex:0 0 auto;
  width:17px; height:17px;
  border-radius:50%;
  border:1px solid #C7D3E0;
  background:#fff;
  color:var(--dmps-muted);
  font-size:11px;
  font-weight:700;
  line-height:15px;
  text-align:center;
  padding:0;
  cursor:help;
  transition:color .15s ease, border-color .15s ease;
}
.component-inner-container .tooltip-base:hover{
  color:var(--dmps-blue);
  border-color:var(--dmps-blue);
}

/* Group rows + children */
.component-inner-container[data-js-hook="component-group-opener"]{ cursor:pointer; }
.group-parent-indicator{ color:var(--dmps-blue) !important; }
.child-components-container .component-inner-container{
  padding:12px 18px 12px 36px;
  background:#FAFCFE;
  border-top:1px solid var(--dmps-line) !important;
}
.child-components-container .name{ font-weight:600 !important; font-size:.93rem; }

/* Two-column component grid on desktop (children stay single-column) */
@media (min-width:1024px){
  .components-container:not(.child-components-container){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:22px;
    row-gap:20px;
    align-items:start;
  }
  .components-container:not(.child-components-container) .component-container,
  .components-container:not(.child-components-container) .component-group{
    width:100% !important;
    margin:0 !important;
  }
}
@media (max-width:1023px){
  .components-container:not(.child-components-container){ display:block !important; }
  .component-container{ margin-bottom:14px !important; }
}

/* ---------- 6. Legend ---------- */
.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:8px;
  color:var(--dmps-muted);
  font-weight:600;
}
.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 ---------- */
.incidents-list{ margin-top:48px; }
#past-incidents{
  font-family:var(--font-sans);
  color:var(--dmps-blue-deep);
  font-weight:900;
  letter-spacing:.02em;
  position:relative;
  padding-bottom:10px;
  margin-bottom:26px;
  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;
}

.status-day{ margin-bottom:26px; }
.status-day .date{
  font-family:var(--font-sans);
  font-size:.82rem !important;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dmps-muted);
  border-color:var(--dmps-line) !important;
  padding-bottom:8px;
}
.status-day.no-incidents p.color-secondary{
  color:#616B78;
  font-style:italic;
  font-size:.92rem;
}

.incident-container{
  background:var(--dmps-card);
  border:1px solid var(--dmps-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:18px 22px;
  margin-top:12px;
}
.incident-title a{
  color:var(--dmps-blue) !important;
  font-weight:800;
  text-decoration:none;
}
.incident-title a:hover{ text-decoration:underline; }
.updates-container .update{ margin-top:10px; line-height:1.55; }
.updates-container .update small{ color:#616B78; }
.update.resolved      strong{ color:var(--st-green); }
.update.monitoring    strong{ color:var(--st-blue); }
.update.identified    strong{ color:var(--st-orange); }
.update.investigating strong{ color:var(--st-red); }
.update.update        strong{ color:var(--dmps-blue-deep); }

/* ---------- 8. Statuspage footer row (history link + attribution) ---------- */
.page-footer{
  border-color:var(--dmps-line) !important;
  padding-top:20px;
  margin-top:40px;
}
.page-footer .history-footer-link{
  color:var(--dmps-blue);
  font-weight:700;
  text-decoration:none;
}
.page-footer .history-footer-link:hover{ text-decoration:underline; }

/* ---------- 9. Custom DMPS footer (tight, single band) ---------- */
.dmps-footer{
  font-family:var(--font-sans);
  background:var(--dmps-blue);
  border-top:5px solid var(--dmps-gold);
  color:#fff;
  margin-top:26px;
}
.dmps-footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:20px 24px;
  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;
}
.dmps-footer-tagline{
  margin:7px 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:26px;
  flex-wrap:wrap;
}
.dmps-footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.dmps-footer-links a:hover{
  color:var(--dmps-gold);
  border-bottom-color:var(--dmps-gold);
}
.dmps-footer-base{
  border-top:1px solid rgba(255,255,255,.18);
  text-align:center;
  padding:10px 20px 13px;
}
.dmps-footer-base p{
  margin:1px 0;
  font-size:.78rem;
  color:rgba(255,255,255,.85);
  letter-spacing:.02em;
}
.dmps-footer-base .dmps-footer-org{ font-weight:700; color:#fff; }

/* ---------- 9b. Impacted-service halos (self-maintaining) ----------
   Keyed off Statuspage's own status classes via :has() — nothing to update
   per-incident. A card whose row (or any child row, even inside a collapsed
   group) is non-operational grows a soft colored halo. Maintenance glows
   steady; degraded/outage states breathe. Older browsers without :has()
   simply show the normal card. */
/* All-well ambient halo: a card whose rows are all operational wears the
   faintest static green ring — whisper-level reassurance. The impacted rules
   below are declared later, so any non-green row overrides this. */
.component-container:has(.component-inner-container.status-green){
  border-color:rgba(30,123,60,.30) !important;
  box-shadow:0 0 8px 0 rgba(30,123,60,.10), var(--shadow-sm);
}

.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), .45) !important;
  box-shadow:0 0 10px 1px rgba(var(--halo), .18), var(--shadow-sm);
}
/* severity cascade — most severe wins when a group holds mixed children */
.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; }
/* breathing only for degraded/outage — maintenance stays calm */
.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 infinite;
}
@keyframes dmps-service-halo{
  0%,100%{ box-shadow:0 0 6px 0 rgba(var(--halo), .12), var(--shadow-sm); }
  50%    { box-shadow:0 0 18px 3px rgba(var(--halo), .30), var(--shadow-sm); }
}
/* the row's status icon breathes in sympathy (not maintenance) */
.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.4s ease-in-out infinite;
}
@keyframes dmps-icon-breathe{
  0%,100%{ opacity:1; }
  50%    { opacity:.55; }
}

/* ---------- 9c. Micro-details ---------- */

/* Banner state icons (green pulse dot already defined above) */
.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:17px; height:17px;
  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:16px; height:16px;
  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:16px; height:16px;
  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;
}

/* (Banner watermark lives in section 4 with the production-specificity rules) */

/* Past-incident cards: quiet severity spine, self-coloring via :has() */
.incident-container{ border-left:4px solid var(--dmps-line); }
.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:#B04A00; }
.incident-container:has(.incident-title.impact-critical){ border-left-color:#B93221; }

/* Legend chips whisper their own color on hover */
.legend-item.status-green:hover { border-color:var(--st-green); }
.legend-item.status-yellow:hover{ border-color:var(--st-yellow); }
.legend-item.status-orange:hover{ border-color:var(--st-orange); }
.legend-item.status-red:hover   { border-color:var(--st-red); }
.legend-item.status-blue:hover  { border-color:var(--st-blue); }

/* Component tooltips in brand voice (Statuspage uses tooltipster) */
.tooltipster-base{ font-family:var(--font-sans); }
.tooltipster-base .tooltipster-content{
  background:var(--dmps-blue-deep);
  color:#fff;
  border-radius:8px;
  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); }
.tooltipster-default .tooltipster-arrow span{ border-color:var(--dmps-blue-deep) !important; }

/* Micro-typography: lining numerals for phone numbers, dates, timestamps */
.dmps-tile-value,
.dmps-footer-links a,
.status-day .date,
.updates-container small,
.last-updated-stamp{
  font-variant-numeric:tabular-nums;
}

/* Text selection in brand colors */
::selection{ background:var(--dmps-gold); color:var(--dmps-blue-deep); }

/* ---------- 10. Animations ---------- */
@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 11px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- 11. Responsive + reduced motion ---------- */
@media (max-width:700px){
  .dmps-hero-inner{ padding:26px 18px 28px; }
  .dmps-hero-top{
    flex-direction:column;
    text-align:center;
    gap:14px;
    margin-bottom:22px;
  }
  .dmps-hero-subscribe{ margin-left:0; }
  .dmps-hero-eyebrow{ display:none; } /* logo directly above already says it */
  .dmps-hero-title::after{ margin:9px auto 0; transform-origin:center; }
  .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; }
  .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; }
  .page-status.status-none .status::before{ animation:none; }
  /* halo goes static but the emphasis stays */
  .dmps-tiles .dmps-tile:nth-child(2){
    animation:none;
    box-shadow:0 0 0 4px rgba(253,185,19,.35);
  }
}