/**
 * DNS Propagation Checker — tool styles
 *
 * Layout plus the resolver-card state colours. Cards, tables, badges, meters,
 * rings and alerts are all frikwork; nothing here restyles one.
 *
 * The card states come from statusOf() in script.js and are the whole point of
 * the grid — at a glance you need to see which resolvers agree:
 *   is-idle      not checked yet
 *   is-checking  request in flight
 *   is-ok        answered, and matches the expected value
 *   is-mismatch  answered, but with something else — the interesting one
 *   is-empty     no records / NXDOMAIN
 *   is-fail      the resolver did not answer
 */

.dnsprop-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.dnsprop-side { display: flex; flex-direction: column; gap: var(--fw-space-lg); }
.dnsprop-side .app-panel + .app-panel { margin-top: 0; }

.dnsprop-countdown { color: var(--fw-text-muted); font-variant-numeric: tabular-nums; }

/* --- Type reference list --------------------------------------------------- */

.dnsprop-ref { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fw-space-xs); }
.dnsprop-ref__item { display: flex; align-items: baseline; gap: var(--fw-space-sm); }
.dnsprop-ref__badge { flex: 0 0 auto; min-width: 3.4rem; text-align: center; }
.dnsprop-ref__text { color: var(--fw-text-muted); font-size: 0.82rem; line-height: 1.45; }

.dnsprop-note { margin: 0 0 var(--fw-space-sm); color: var(--fw-text-muted); font-size: 0.82rem; line-height: 1.5; }
.dnsprop-note:last-child { margin-bottom: 0; }
.dnsprop-links { display: flex; flex-wrap: wrap; gap: var(--fw-space-sm); }

/* --- Report header --------------------------------------------------------- */

.dnsprop-report {
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  background: var(--fw-bg-2);
  padding: var(--fw-space-lg);
  margin-bottom: var(--fw-space-lg);
}
.dnsprop-report__head { display: flex; align-items: center; gap: var(--fw-space-md); margin-bottom: var(--fw-space-lg); }
.dnsprop-report__globe { font-size: 1.4rem; color: var(--fw-brand-text); }
.dnsprop-report__id { min-width: 0; }
.dnsprop-report__id h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.dnsprop-report__meta { margin: 0.1rem 0 0; color: var(--fw-text-muted); }

.dnsprop-report__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fw-space-lg);
  align-items: center;
}

.dnsprop-gauge { display: flex; flex-direction: column; align-items: center; gap: var(--fw-space-xs); }
.dnsprop-gauge__label { color: var(--fw-text-muted); }

.dnsprop-stats { gap: var(--fw-space-sm); }
.dnsprop-stats .app-stat { padding: var(--fw-space-md); }
.dnsprop-stats .app-stat__value { font-size: 1.35rem; }

.dnsprop-meter { margin-top: var(--fw-space-lg); }

/* --- Region grid ----------------------------------------------------------- */

.dnsprop-region { margin-bottom: var(--fw-space-lg); }
.dnsprop-region__head { display: flex; align-items: center; gap: var(--fw-space-sm); margin-bottom: var(--fw-space-sm); }
.dnsprop-region__title { margin: 0; font-size: 0.9rem; letter-spacing: 0.01em; }
.dnsprop-region__score { margin-left: auto; font-variant-numeric: tabular-nums; }

.dnsprop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--fw-space-md);
}

/* --- Resolver card --------------------------------------------------------- */

.dnsprop-card {
  border: 1px solid var(--fw-border);
  border-left: 3px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-card);
  padding: var(--fw-space-md);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.dnsprop-card__head { display: flex; align-items: center; gap: var(--fw-space-sm); margin-bottom: 0.2rem; }
.dnsprop-card__name { font-weight: 600; font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.dnsprop-card__cc { margin-left: auto; flex: 0 0 auto; }

.dnsprop-card__dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--fw-text-muted);
  transition: background 0.2s ease;
}

.dnsprop-card__meta {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--fw-space-sm);
  color: var(--fw-text-muted);
  font-size: 0.75rem;
}
.dnsprop-card__place { display: inline-flex; align-items: center; gap: 0.25rem; }
.dnsprop-card__ip { margin-left: auto; font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.dnsprop-card__body { min-height: 2.2rem; }
.dnsprop-card__idle { margin: 0; }
.dnsprop-card__waiting { display: flex; align-items: center; gap: var(--fw-space-sm); margin: 0; }
.dnsprop-card__timing { margin: var(--fw-space-xs) 0 0; color: var(--fw-text-muted); }
.dnsprop-card__alert { margin: 0; }

/* State colours. Only the left rule and the dot change, so a wall of 26 cards
   stays readable — a full-card tint at this density is noise, not signal. */
.dnsprop-card.is-idle { opacity: 0.72; }
.dnsprop-card.is-checking { border-left-color: var(--fw-info); }
.dnsprop-card.is-checking .dnsprop-card__dot { background: var(--fw-info); }
.dnsprop-card.is-ok { border-left-color: var(--fw-success); }
.dnsprop-card.is-ok .dnsprop-card__dot { background: var(--fw-success); }
.dnsprop-card.is-mismatch { border-left-color: var(--fw-warning); }
.dnsprop-card.is-mismatch .dnsprop-card__dot { background: var(--fw-warning); }
.dnsprop-card.is-empty { border-left-color: var(--fw-warning); }
.dnsprop-card.is-empty .dnsprop-card__dot { background: var(--fw-warning); }
.dnsprop-card.is-fail { border-left-color: var(--fw-danger); }
.dnsprop-card.is-fail .dnsprop-card__dot { background: var(--fw-danger); }

/* --- Record tables --------------------------------------------------------- */

.dnsprop-table { font-size: 0.8rem; }
.dnsprop-table td { padding: 0.3rem 0.4rem; vertical-align: top; }
.dnsprop-table__type { width: 1%; white-space: nowrap; }
.dnsprop-table__value { min-width: 0; }
.dnsprop-table__ttl { width: 1%; white-space: nowrap; text-align: right; color: var(--fw-text-muted); }
.dnsprop-table__copy { width: 1%; text-align: right; }

.dnsprop-val {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow-wrap: anywhere;
}
.dnsprop-val--wrap { display: inline-block; max-width: 60ch; }

.dnsprop-detail { margin-left: var(--fw-space-xs); color: var(--fw-text-muted); }
.dnsprop-tick { margin-left: var(--fw-space-xs); color: var(--fw-success); }
.dnsprop-cross { margin-left: var(--fw-space-xs); color: var(--fw-warning); }

/* --- Answers tab ----------------------------------------------------------- */

.dnsprop-answers__lead { margin: 0 0 var(--fw-space-md); }
.dnsprop-answers { font-size: 0.85rem; }

.dnsprop-share { display: flex; align-items: center; gap: var(--fw-space-sm); min-width: 8rem; }
.dnsprop-share__meter { flex: 1 1 auto; }
.dnsprop-share__pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--fw-text-muted); }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .dnsprop-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .dnsprop-report__body { grid-template-columns: 1fr; }
  .dnsprop-grid { grid-template-columns: 1fr; }
}