/**
 * /tools/spf-score — native tools-shell.
 */

body.mg-site--v2b .mg-ss a.mg2-textlink {
  color: var(--mg-blue-link, #0062ad);
}

body.mg-site--v2b .mg-ss a.mg2-textlink:hover {
  color: var(--mg-blue-hover, #2b8ed9);
}

body.mg-site--v2b a.mg2-btn--fill,
body.mg-site--v2b button.mg2-btn--fill {
  color: var(--mg-on-accent, #fff);
}

.mg-ss__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.mg-ss__hero .mg2-hero__title {
  white-space: nowrap;
}

.mg-ss__form {
  margin-top: 28px;
  max-width: min(640px, 100%);
}

.mg-ss__progress {
  margin-top: 28px;
  max-width: 640px;
}

.mg-ss__results {
  margin-top: 36px;
  max-width: 920px;
}

.mg-ss__verdict {
  padding: 20px 22px;
  background: var(--mg-cream, #f2eeeb);
  border-radius: 3px;
  margin: 0 0 16px;
  border-left: 4px solid #0062ad;
}

.mg-ss__verdict.is-a {
  border-left-color: #2ecc71;
}

.mg-ss__verdict.is-b {
  border-left-color: #0062ad;
}

.mg-ss__verdict.is-c {
  border-left-color: #f0a202;
}

.mg-ss__verdict.is-d {
  border-left-color: #8a8a8a;
}

.mg-ss__verdict-label {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mg-black, #000);
}

.mg-ss__verdict-domain {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--mg-black, #000);
}

.mg-ss__verdict-hint {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  color: var(--mg-black, #000);
}

.mg-ss__note {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--mg-cream, #f2eeeb);
  border-radius: 3px;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  color: var(--mg-black, #000);
}

.mg-ss__block {
  margin: 0 0 20px;
}

.mg-ss__block-title {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--mg-black, #000);
}

.mg-ss__spf {
  margin: 0;
  padding: 14px 16px;
  background: #111;
  color: #f5f5f5;
  border-radius: 3px;
  font-family: var(--mg-tool-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.mg-ss__copy-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.mg-ss__providers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mg-ss__provider {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  padding: 12px 14px;
  background: var(--mg-cream, #f2eeeb);
  border-radius: 3px;
}

.mg-ss__provider-name {
  font-weight: 700;
  color: var(--mg-black, #000);
}

.mg-ss__provider-host {
  font-family: var(--mg-tool-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.mg-ss__empty {
  margin: 0;
  font-weight: 600;
  color: var(--mg-black, #000);
}

.mg-ss__links {
  margin-top: 8px;
  font-weight: 600;
}

html[data-theme='dark'] .mg-ss__verdict,
html[data-theme='dark'] .mg-ss__note,
html[data-theme='dark'] .mg-ss__provider {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] .mg-ss__verdict-label,
html[data-theme='dark'] .mg-ss__verdict-domain,
html[data-theme='dark'] .mg-ss__verdict-hint,
html[data-theme='dark'] .mg-ss__note,
html[data-theme='dark'] .mg-ss__block-title,
html[data-theme='dark'] .mg-ss__provider-name,
html[data-theme='dark'] .mg-ss__empty {
  color: var(--mg-white, #fff);
}

html[data-theme='dark'] .mg-ss__provider-host {
  color: #bbb;
}

.mg-ss__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .mg-ss__cards {
    grid-template-columns: 1fr;
  }
}

.mg-ss__card h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--mg-black, #000);
}

.mg-ss__card p {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  color: var(--mg-black, #000);
}

/* API promo */
.mg-ss__api-promo {
  padding: 64px 0;
}

.mg-ss__api-promo .mg2-section-head {
  margin-bottom: 28px;
}

.mg-ss__api-promo .mg2-section-head p {
  max-width: 52rem;
}

.mg-ss__api-cta {
  margin: 28px 0 0;
}

body.mg-site--v2b .mg-ss__api-promo a.mg2-btn--fill {
  color: var(--mg-on-accent, #fff);
}

@media (max-width: 720px) {
  .mg-ss__api-promo {
    padding: 48px 0;
  }
}