/* School logo unified v6
   One visual rule for every school-system logo mark.
   The SVG contains only the M.  The rounded tile + green status dot are added here. */
:root{
  --school-logo-box: 56px;
  --school-logo-symbol: 37px;
  --school-logo-radius: 19px;
  --school-logo-dot: 13px;
  --school-logo-dot-border: 3px;
}

/* Logo boxes that actually contain SVG/img marks */
:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo),
:where(.logo):has(svg),
:where(.logo):has(img){
  width: var(--school-logo-box) !important;
  height: var(--school-logo-box) !important;
  min-width: var(--school-logo-box) !important;
  flex: 0 0 var(--school-logo-box) !important;
  border-radius: var(--school-logo-radius) !important;
  background: linear-gradient(145deg,#ffffff 0%,#eef5ff 100%) !important;
  border: 1px solid rgba(185,210,255,.92) !important;
  box-shadow: 0 14px 30px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.95) !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  line-height: 1 !important;
  color: transparent !important;
  font-size: 0 !important;
}

:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo) svg,
:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo) img,
:where(.logo):has(svg) svg,
:where(.logo):has(img) img{
  width: var(--school-logo-symbol) !important;
  height: var(--school-logo-symbol) !important;
  max-width: var(--school-logo-symbol) !important;
  max-height: var(--school-logo-symbol) !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.65)) !important;
}

/* If an older inline SVG still has its own green dot, hide it.  Dot is controlled by CSS below. */
:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo,.logo) svg circle[fill="#22C55E"],
:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo,.logo) svg circle[fill="#22c55e"]{
  display:none !important;
}

/* One green status dot for all logo boxes. */
:where(.pm-mark,.sp-mark,.ep-mark,.tm-brand-badge,.tm-logo,.tm-mark,.ss-logo,.p1-logo,.sx-mark,.brand-logo,.mini-link-logo)::after,
:where(.logo):has(svg)::after,
:where(.logo):has(img)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: var(--school-logo-dot) !important;
  height: var(--school-logo-dot) !important;
  border-radius:999px !important;
  background:#22c55e !important;
  border: var(--school-logo-dot-border) solid #ffffff !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.14), 0 4px 10px rgba(34,197,94,.22) !important;
  z-index:4 !important;
  pointer-events:none !important;
}

/* Remove old duplicate dots that some layouts placed inside the logo mark. */
:where(.tm-brand-badge,.tm-logo,.tm-mark) .tm-dot,
:where(.pm-mark,.sp-mark,.ep-mark,.sx-mark) .tm-dot{
  display:none !important;
}

@media (max-width: 720px){
  :root{
    --school-logo-box: 52px;
    --school-logo-symbol: 35px;
    --school-logo-radius: 18px;
    --school-logo-dot: 12px;
  }
}

@media (max-width: 420px){
  :root{
    --school-logo-box: 50px;
    --school-logo-symbol: 34px;
    --school-logo-radius: 17px;
  }
}