/* Customer account polish kept separate from the established account.css. */

@media (min-width: 1101px) {
  .account-topbar .account-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px 8px;
    width: 100%;
  }

  .account-topbar .account-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    text-align: center;
    white-space: nowrap;
  }
}

.credential-row[id] {
  scroll-margin-top: 18px;
}
/* === SERVICE INCIDENT NOTIFICATIONS V1 === */
.service-incident-banner,
.service-incident-card{
  background:#fff;
  border:1px solid var(--border,#d8e1ec);
  border-left:6px solid #0b57d0;
  border-radius:12px;
  padding:16px 18px;
}
.service-incident-banner{
  --incident-accent:#0b57d0;
  --incident-bg:#eff6ff;
  --incident-ink:#123765;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  background:var(--incident-bg);
  border-color:color-mix(in srgb,var(--incident-accent) 28%,#d8e1ec);
  border-left-color:var(--incident-accent);
  color:var(--incident-ink);
  box-shadow:0 8px 22px rgba(15,23,42,.07);
  animation:incident-banner-enter .32s ease-out both;
}
.service-incident-banner h2,
.service-incident-card h2{margin:4px 0 6px}
.service-incident-banner p{margin:0 0 5px}
.service-incident-content{min-width:0}
.service-incident-heading{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.service-incident-kicker{
  display:inline-block;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.service-incident-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--incident-accent);
  color:#fff;
  font-size:1.15rem;
  font-weight:900;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--incident-accent) 13%,transparent);
}
.service-incident-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--incident-accent) 28%,transparent);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--incident-accent);
  font-size:.76rem;
  font-weight:800;
}
.service-incident-meta{
  display:flex;
  gap:6px 14px;
  flex-wrap:wrap;
  color:color-mix(in srgb,var(--incident-ink) 75%,#667085);
}
.service-incident-meta span+span::before{
  content:'\2022';
  margin-right:14px;
}
.service-incident-link{white-space:nowrap}
.service-incident-banner.severity-maintenance{
  --incident-accent:#6d28d9;
  --incident-bg:#f5f3ff;
  --incident-ink:#3f2475;
}
.service-incident-banner.severity-warning{
  --incident-accent:#b45309;
  --incident-bg:#fffbeb;
  --incident-ink:#713f12;
}
.service-incident-banner.severity-major{
  --incident-accent:#b42318;
  --incident-bg:#fff1f2;
  --incident-ink:#7f1d1d;
  border-color:#fecaca;
  border-left-color:var(--incident-accent);
}
.service-incident-banner.severity-major .service-incident-icon{
  animation:incident-major-pulse 1.15s ease-in-out 3;
}
.severity-maintenance{border-left-color:#7c3aed}
.severity-warning{border-left-color:#d97706;background:#fffbeb}
.severity-major{border-left-color:#b42318;background:#fff5f5}
.incident-resolution{
  margin:14px 0;
  padding:12px;
  border-radius:8px;
  background:#edf9f1;
  color:#17643a;
}
@keyframes incident-banner-enter{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes incident-major-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 5px rgba(180,35,24,.13)}
  50%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(180,35,24,.04)}
}
@media(max-width:650px){
  .service-incident-banner{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    padding:14px;
  }
  .service-incident-link{
    grid-column:1/-1;
    width:100%;
    text-align:center;
  }
  .service-incident-meta{display:grid;gap:3px}
  .service-incident-meta span+span::before{content:none}
}
@media(prefers-reduced-motion:reduce){
  .service-incident-banner,
  .service-incident-banner.severity-major .service-incident-icon{animation:none}
}