/**
 * DMARC Generator & Analyser — tool styles
 *
 * Layout, the record readout and the tag breakdown only. Buttons, cards,
 * alerts, tabs, badges, meters and the timeline all come from frikwork, and
 * nothing here restyles one of them. Every colour is a --fw-* token, so both
 * themes work without a second ruleset.
 */

/* --- Shared two-column shell ---------------------------------------------- */

.dmarc-tabbar { margin-bottom: var(--fw-space-lg); }

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

.dmarc-main { display: flex; flex-direction: column; gap: var(--fw-space-lg); }

/* --- Presets --------------------------------------------------------------- */

.dmarc-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-xs);
}

.dmarc-preset {
  justify-content: flex-start;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The active preset reads as "this is the current shape of the form", so it
   borrows the brand accent rather than looking like a pressed button. */
.dmarc-preset.is-active {
  border-color: var(--fw-brand);
  color: var(--fw-brand-text);
  background: color-mix(in srgb, var(--fw-brand) 14%, transparent);
}

.dmarc-preset-hint { display: block; margin-top: var(--fw-space-sm); }

/* --- Slider ---------------------------------------------------------------- */

.dmarc-pct {
  padding: 0.05rem 0.45rem;
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-2);
  color: var(--fw-brand-text);
  font-weight: 700;
}

.dmarc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  color: var(--fw-text-muted);
}

/* --- Advanced options ------------------------------------------------------ */

.dmarc-advanced { margin-bottom: var(--fw-space-md); }
.dmarc-advanced .fw-field:last-child { margin-bottom: 0; }

.dmarc-actions { display: flex; flex-direction: column; gap: var(--fw-space-sm); }

/* --- DNS deployment strip -------------------------------------------------- */

.dmarc-dns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--fw-space-md);
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}

.dmarc-dns__item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dmarc-dns__label { color: var(--fw-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dmarc-dns__value { display: flex; align-items: center; gap: var(--fw-space-xs); flex-wrap: wrap; }
.dmarc-dns__value code { overflow-wrap: anywhere; }

/* --- The record readout ---------------------------------------------------- */

.dmarc-record {
  margin-top: var(--fw-space-md);
  padding: var(--fw-space-md);
  min-height: 5rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--fw-brand);
  border-radius: var(--fw-radius-md);
  background: color-mix(in srgb, var(--fw-brand) 7%, transparent);
}

/* Empty and error states only change the accent — the box never moves. */
.dmarc-record.is-empty {
  border-color: var(--fw-border);
  background: var(--fw-bg-2);
}
.dmarc-record.is-empty .dmarc-record__text {
  color: var(--fw-text-muted);
  font-weight: 400;
}
.dmarc-record.has-problem {
  border-color: var(--fw-danger);
  background: color-mix(in srgb, var(--fw-danger) 8%, transparent);
}

.dmarc-record__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
  -webkit-user-select: all;   /* Safari < 16.4 still needs the prefix */
  user-select: all;
}

/* --- Summary tiles --------------------------------------------------------- */

.dmarc-summary { margin-top: var(--fw-space-lg); }
.dmarc-summary .app-stat { padding: var(--fw-space-md); }
.dmarc-summary .app-stat__value { font-size: 1.1rem; }
.dmarc-policy { text-transform: capitalize; }

/* --- Notes ----------------------------------------------------------------- */

.dmarc-notes:not(:empty) { margin-top: var(--fw-space-lg); }
.dmarc-note + .dmarc-note { margin-top: var(--fw-space-sm); }
.dmarc-note__list { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.dmarc-note__list li + li { margin-top: 0.3rem; }

/* --- Rollout guide --------------------------------------------------------- */

.dmarc-guide .fw-timeline__body { color: var(--fw-text-2); }
.dmarc-guide code { white-space: nowrap; }

/* --- Analyser: examples ---------------------------------------------------- */

.dmarc-examples {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  margin-top: var(--fw-space-xs);
}

.dmarc-example {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  height: auto;
  padding: var(--fw-space-sm) var(--fw-space-md);
  text-align: left;
}
.dmarc-example__label { font-weight: 600; }
.dmarc-example__hint { color: var(--fw-text-muted); font-weight: 400; }

/* --- Analyser: results ----------------------------------------------------- */

.dmarc-status { margin-bottom: var(--fw-space-lg); }

.dmarc-meter {
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}

.dmarc-meter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--fw-space-sm);
}
.dmarc-meter__head .fw-label { margin: 0; }

.dmarc-meter__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--fw-space-xs);
  color: var(--fw-text-muted);
}

.dmarc-subhead {
  display: flex;
  align-items: center;
  gap: var(--fw-space-xs);
  margin: var(--fw-space-lg) 0 var(--fw-space-sm);
  font-size: 0.95rem;
}
.dmarc-subhead i { color: var(--fw-brand-text); }

.dmarc-taglist { list-style: none; margin: 0; padding: 0; }

.dmarc-tag {
  display: flex;
  align-items: flex-start;
  gap: var(--fw-space-md);
  padding: var(--fw-space-sm) var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}
.dmarc-tag + .dmarc-tag { margin-top: var(--fw-space-xs); }

.dmarc-tag__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
}

/* Buckets match the analyser's tag groups: what the record does, who hears
   about it, how strictly it matches, and everything else. */
.dmarc-tag__icon--policy {
  background: color-mix(in srgb, var(--fw-success) 20%, transparent);
  color: var(--fw-success);
}
.dmarc-tag__icon--report {
  background: color-mix(in srgb, var(--fw-info) 20%, transparent);
  color: var(--fw-info);
}
.dmarc-tag__icon--alignment {
  background: color-mix(in srgb, var(--fw-warning) 20%, transparent);
  color: var(--fw-warning);
}
.dmarc-tag__icon--config {
  background: color-mix(in srgb, var(--fw-brand) 20%, transparent);
  color: var(--fw-brand-text);
}
.dmarc-tag__icon--unknown {
  background: var(--fw-bg-hover);
  color: var(--fw-text-muted);
}

.dmarc-tag__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dmarc-tag__name { color: var(--fw-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dmarc-tag__value {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--fw-text);
  overflow-wrap: anywhere;
}
.dmarc-tag__desc { color: var(--fw-text-muted); }

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

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

@media (max-width: 560px) {
  .dmarc-presets { grid-template-columns: 1fr; }
  .dmarc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}