/**
 * Email Health Checker - tool styles
 *
 * Cards, buttons, badges, chips, tables, alerts, meters and the score ring are
 * all frikwork's; nothing here restyles one. What is left is the page rhythm,
 * the check-section layout, the finding and blacklist rows, and the report
 * typography.
 *
 * ONE LEVEL OF CHROME. The checks used to be seven cards in an auto-fit grid,
 * each holding bordered record boxes holding bordered finding boxes - three
 * frames around one sentence, and columns whose heights never matched. There
 * is now one panel, seven full-width sections divided by hairline rules, and
 * inside a section nothing is boxed: findings are identified by a left accent
 * rule in the severity colour, records by a single flat tinted block. The only
 * surface that still gets a fill is the fix block, because it holds a record
 * somebody is about to paste into a zone and it has to be findable.
 *
 * Every colour resolves to a --fw-* token or a color-mix over one, so both
 * themes work without a second palette. The severity names are mapped once, in
 * .ehc-layout below, and everything else refers to those - so changing what
 * "warning" looks like is one edit rather than thirty.
 *
 * Tinted surfaces mix the TEXT colour into --fw-bg-2 rather than picking a
 * grey. In the light theme --fw-bg-2 is pure white and the panel behind it is
 * near-white glass, so anything built from bg-2 alone disappears; mixing ink in
 * moves one step away from the surface in whichever direction the theme runs.
 *
 * THE UNKNOWN STATE HAS ITS OWN COLOUR ON PURPOSE. A blacklist we could not
 * reach is neither a pass nor a hit, and the fastest way to ship a tool that
 * lies is to paint it green because green was the default. It gets the muted
 * token and a dashed edge, so it reads as "no answer" at a glance from across
 * the desk.
 */

.ehc-layout {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);

  --ehc-fail:    var(--fw-danger);
  --ehc-warn:    var(--fw-warning);
  --ehc-ok:      var(--fw-success);
  --ehc-info:    var(--fw-info);
  --ehc-unknown: var(--fw-text-muted);

  --ehc-fail-wash:    color-mix(in srgb, var(--fw-danger) 10%, transparent);
  --ehc-warn-wash:    color-mix(in srgb, var(--fw-warning) 10%, transparent);
  --ehc-ok-wash:      color-mix(in srgb, var(--fw-success) 10%, transparent);
  --ehc-info-wash:    color-mix(in srgb, var(--fw-info) 10%, transparent);
  --ehc-unknown-wash: color-mix(in srgb, var(--fw-text-muted) 8%, transparent);

  /* One and two steps away from the panel surface, in either theme. */
  --ehc-surface:   color-mix(in srgb, var(--fw-text) 5%, var(--fw-bg-2));
  --ehc-surface-2: color-mix(in srgb, var(--fw-text) 10%, var(--fw-bg-2));

  /* Cancels the panel body's padding, so a section rule can run edge to edge. */
  --ehc-gutter: var(--fw-space-lg);
}

/* ---------------------------------------------------------------------------
 * The domain form and the phase progress bar
 *
 * Label, then the control row, then the help text. The input and the button
 * are siblings sharing one height and one radius, joined on the edge where
 * they meet - which is the only arrangement that puts the button on the
 * input's baseline rather than on the baseline of a label/input/help group.
 * ------------------------------------------------------------------------ */

.ehc-form {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  --ehc-control-h: 2.75rem;
}

.ehc-form__row {
  display: flex;
  align-items: stretch;
}

.ehc-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ehc-control-h);
  padding-inline: var(--fw-space-md);
  font-size: 0.95rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ehc-form__go {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  height: var(--ehc-control-h);
  margin-left: -1px;            /* one shared edge, not two stacked borders */
  padding-inline: var(--fw-space-lg);
  font-size: 0.9rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* frikwork lifts a button on hover, which would tear the join open. */
.ehc-form__go:hover { transform: none; }

.ehc-form__help { max-width: 80ch; }

.ehc-progress { margin-top: var(--fw-space-lg); }

.ehc-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xs);
}

.ehc-progress__label { color: var(--fw-text-2); font-size: 0.85rem; }
.ehc-progress__pct { color: var(--fw-text-muted); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
 * Score
 * ------------------------------------------------------------------------ */

.ehc-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--fw-space-xl);
}

.ehc-score__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fw-space-xs);
}

.ehc-score__outof { color: var(--fw-text-muted); }

.ehc-score__text { min-width: 0; }

.ehc-score__band {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Sentence case, unlike the rest of .fw-micro: this line is a sentence before
   a domain is entered, and three lines of shouted prose is not a caption. */
.ehc-score__meta {
  margin: 0.35rem 0 var(--fw-space-md);
  max-width: 70ch;
  color: var(--fw-text-muted);
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
}

.ehc-score__resolver { color: var(--fw-text-muted); align-self: center; }

.ehc-score__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
}

/* Shared tally pill, used by the score counts and the blacklist summary. */
.ehc-tally {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fw-text-2);
}

.ehc-tally--fail,
.ehc-tally--listed { border-color: var(--ehc-fail); background: var(--ehc-fail-wash); color: var(--ehc-fail); }
.ehc-tally--warn   { border-color: var(--ehc-warn); background: var(--ehc-warn-wash); color: var(--ehc-warn); }
.ehc-tally--ok,
.ehc-tally--clean,
.ehc-tally--whitelisted { border-color: var(--ehc-ok); background: var(--ehc-ok-wash); color: var(--ehc-ok); }
.ehc-tally--info   { border-color: var(--ehc-info); background: var(--ehc-info-wash); color: var(--ehc-info); }

.ehc-tally--error {
  border-style: dashed;
  border-color: var(--ehc-unknown);
  background: var(--ehc-unknown-wash);
  color: var(--fw-text-muted);
}

.ehc-deductions {
  margin-top: var(--fw-space-lg);
  padding-top: var(--fw-space-md);
  border-top: 1px solid var(--fw-border);
}

.ehc-deductions__title {
  margin: 0 0 var(--fw-space-xs);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fw-text-muted);
}

/* A ruled grid rather than a loose wrap: every deduction starts on a rule and
   lines its points up in the same gutter, whichever column it lands in. */
.ehc-deductions__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* min() so the track can never be wider than the panel: auto-fill always
     lays down one track at the minimum, and a bare 24rem overflowed a phone. */
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  column-gap: var(--fw-space-xl);
}

.ehc-deductions__item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--fw-space-sm);
  padding: 0.45rem 0;
  border-top: 1px dotted var(--fw-border);
  color: var(--fw-text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ehc-deductions__points {
  text-align: right;
  font-weight: 700;
  color: var(--ehc-fail);
}

.ehc-deductions__item--none {
  grid-template-columns: minmax(0, 1fr);
  color: var(--ehc-ok);
}

/* ---------------------------------------------------------------------------
 * The status strip
 *
 * Seven anchors, one per check: the whole verdict at a glance, and the way
 * down to the detail. setBlockState() in script.js owns the is-* class, the
 * title and the screen-reader half, so a pill and the section it points at can
 * never disagree.
 * ------------------------------------------------------------------------ */

.ehc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-lg);
}

.ehc-strip__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  background: var(--ehc-surface);
  color: var(--fw-text-2);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--fw-dur) ease, background var(--fw-dur) ease,
              color var(--fw-dur) ease;
}

.ehc-strip__pill:hover,
.ehc-strip__pill:focus-visible { border-color: var(--fw-brand); color: var(--fw-text); }

.ehc-strip__icon { font-size: 0.8em; opacity: 0.8; }

.ehc-strip__pill.is-checking { border-color: var(--fw-brand); color: var(--fw-brand-text); }
.ehc-strip__pill.is-ok    { border-color: var(--ehc-ok); background: var(--ehc-ok-wash); color: var(--ehc-ok); }
.ehc-strip__pill.is-warn  { border-color: var(--ehc-warn); background: var(--ehc-warn-wash); color: var(--ehc-warn); }
.ehc-strip__pill.is-fail  { border-color: var(--ehc-fail); background: var(--ehc-fail-wash); color: var(--ehc-fail); }
.ehc-strip__pill.is-info  { border-color: var(--ehc-info); background: var(--ehc-info-wash); color: var(--ehc-info); }

/* ---------------------------------------------------------------------------
 * The check sections
 *
 * Pulled out to the panel edges so the dividing rules run the full width and
 * the state accent sits on the card edge itself. No section has a border, a
 * background or a shadow of its own.
 * ------------------------------------------------------------------------ */

.ehc-checks {
  margin: 0 calc(var(--ehc-gutter) * -1) calc(var(--ehc-gutter) * -1);
  border-top: 1px solid var(--fw-border);
}

.ehc-block {
  position: relative;
  padding: var(--fw-space-lg) var(--ehc-gutter);
  scroll-margin-top: 5.5rem;      /* the header is sticky */
}

.ehc-block + .ehc-block { border-top: 1px solid var(--fw-border); }

.ehc-block::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  transition: background var(--fw-dur) ease;
}

.ehc-block.is-checking::before { background: var(--fw-brand); }
.ehc-block.is-ok::before       { background: var(--ehc-ok); }
.ehc-block.is-warn::before     { background: var(--ehc-warn); }
.ehc-block.is-fail::before     { background: var(--ehc-fail); }
.ehc-block.is-info::before     { background: var(--ehc-info); }

.ehc-block__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--fw-space-md);
  margin-bottom: var(--fw-space-md);
}

.ehc-block__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--fw-radius-md);
  background: var(--ehc-unknown-wash);
  color: var(--fw-text-muted);
  font-size: 0.9rem;
  transition: background var(--fw-dur) ease, color var(--fw-dur) ease;
}

.ehc-block.is-checking .ehc-block__icon {
  background: color-mix(in srgb, var(--fw-brand) 12%, transparent);
  color: var(--fw-brand-text);
}
.ehc-block.is-ok   .ehc-block__icon { background: var(--ehc-ok-wash); color: var(--ehc-ok); }
.ehc-block.is-warn .ehc-block__icon { background: var(--ehc-warn-wash); color: var(--ehc-warn); }
.ehc-block.is-fail .ehc-block__icon { background: var(--ehc-fail-wash); color: var(--ehc-fail); }
.ehc-block.is-info .ehc-block__icon { background: var(--ehc-info-wash); color: var(--ehc-info); }

.ehc-block__id { min-width: 0; }

.ehc-block__name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.ehc-block__note {
  margin: 0.15rem 0 0;
  max-width: 78ch;
  color: var(--fw-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ehc-block__status { align-self: center; white-space: nowrap; }
.ehc-block__status--ok   { background: var(--ehc-ok-wash); color: var(--ehc-ok); }
.ehc-block__status--warn { background: var(--ehc-warn-wash); color: var(--ehc-warn); }
.ehc-block__status--fail { background: var(--ehc-fail-wash); color: var(--ehc-fail); }
.ehc-block__status--info { background: var(--ehc-info-wash); color: var(--ehc-info); }

/*
 * Check data on the left, findings on the right.
 *
 * Sections are full width, so a tall check no longer drags a short neighbour
 * down with it - which is what the old three-up card grid did, leaving craters
 * of dead space and starting the second row halfway down the page.
 */
.ehc-block__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--fw-space-lg) var(--fw-space-xl);
}

.ehc-check__data {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-md);
  min-width: 0;
}

/* Nothing to report: the data takes the whole row rather than sitting in a
   half column beside an empty one. */
.ehc-check__data:only-child { grid-column: 1 / -1; }

/* Nothing published: the note takes the shape a record would have taken, so
   the data column reads as answered rather than as a hole beside a full
   findings column. */
.ehc-check__data > .ehc-block__idle:only-child {
  padding: var(--fw-space-sm) var(--fw-space-md);
  border-radius: var(--fw-radius-md);
  background: var(--ehc-surface);
  font-style: italic;
}

.ehc-block__body > .ehc-block__idle,
.ehc-block__body > .ehc-block__waiting { grid-column: 1 / -1; }

.ehc-block__idle { margin: 0; }

.ehc-block__waiting {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin: 0;
}

.ehc-subhead {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fw-text-muted);
}

/* ---------------------------------------------------------------------------
 * Small shared pieces
 * ------------------------------------------------------------------------ */

.ehc-mono {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow-wrap: anywhere;
}

.ehc-kvs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0 var(--fw-space-xl);
}

/*
 * Capped, because a kv is not always in a .ehc-kvs grid - renderMx() emits a
 * bare one for the mail provider. Uncapped, that row stretched the label and
 * its value to opposite ends of a very wide column with nothing in between.
 *
 * The cap goes on the row rather than on the grid track: auto-fill counts
 * repetitions against the track's MAXIMUM when that is definite, so capping
 * the track collapses an eight-row DMARC grid to a single column.
 */
.ehc-kv {
  max-width: 26rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--fw-space-md);
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--fw-border);
  font-size: 0.88rem;
}

.ehc-kv__label {
  color: var(--fw-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/*
 * Pushed right, and allowed to drop onto a line of its own.
 *
 * A rua tag is a mailto: address the length of the whole row. Held on the
 * label's line it had roughly 190px to fit 240px of text and broke
 * "clickclickmedia" down the middle; wrapping moves it to the full width of
 * the row instead, where it fits whole. break-word rather than anywhere for
 * the same reason: only break inside a word when the word cannot fit at all.
 */
.ehc-kv__value {
  min-width: 0;
  margin-left: auto;
  text-align: right;
  overflow-wrap: break-word;
  color: var(--fw-text);
}

.ehc-kv__value--muted { color: var(--fw-text-muted); font-style: italic; }

.ehc-chip { border: 1px solid var(--fw-border); }
.ehc-chip--ok    { border-color: var(--ehc-ok); color: var(--ehc-ok); background: var(--ehc-ok-wash); }
.ehc-chip--warn  { border-color: var(--ehc-warn); color: var(--ehc-warn); background: var(--ehc-warn-wash); }
.ehc-chip--fail  { border-color: var(--ehc-fail); color: var(--ehc-fail); background: var(--ehc-fail-wash); }
.ehc-chip--muted { border-color: var(--fw-border); color: var(--fw-text-muted); background: var(--ehc-unknown-wash); }
.ehc-chip--error {
  border-style: dashed;
  border-color: var(--ehc-unknown);
  color: var(--fw-text-muted);
  background: var(--ehc-unknown-wash);
}

.ehc-note { display: block; color: var(--fw-text-muted); }

.ehc-alert { margin: 0; }

/* --- The MX host rows ------------------------------------------------------
 *
 * A row per host, not a three-column table. In the table the host shared its
 * width with a column of IPv6 addresses, and a squeezed cell plus an
 * aggressive break rule hyphenated an Office 365 hostname down the middle of a
 * word ("zaatinihom / es-com- / au.mail.pr / otection.o / utlook.com"). Here
 * the host owns the line and breaks only where a hostname sensibly can; the
 * addresses wrap underneath as chips, so a long IPv6 can never widen the row.
 * ------------------------------------------------------------------------ */

.ehc-mx-list { margin: 0; padding: 0; list-style: none; }

.ehc-mx {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--fw-space-md);
  padding: var(--fw-space-sm) 0;
  border-top: 1px dotted var(--fw-border);
}

.ehc-mx:first-child { border-top: none; padding-top: 0; }

.ehc-mx__pri {
  display: grid;
  place-items: center;
  padding: 0.15rem 0.35rem;
  border-radius: var(--fw-radius-sm);
  background: var(--ehc-surface-2);
  color: var(--fw-text-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.ehc-mx__main { min-width: 0; }

.ehc-mx__host {
  font-size: 0.9rem;
  color: var(--fw-text);
  word-break: normal;
  overflow-wrap: break-word;
}

.ehc-mx__ips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.ehc-mx__ip {
  padding: 0.1rem 0.4rem;
  border-radius: var(--fw-radius-sm);
  background: var(--ehc-surface);
  color: var(--fw-text-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.ehc-mx__none {
  display: block;
  margin-top: 0.3rem;
  color: var(--fw-text-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* --- A published record with a copy button ---------------------------------
 *
 * Flat: a tinted block with no border, the label on a small uppercase line
 * above it and the copy button as a ghost icon at the top right.
 *
 * The value gets a row of its own by explicit grid placement, whatever the
 * label says. This was once a flex ROW with a `flex: 0 0 auto` label, which is
 * fine while the label is the word "Published" and breaks badly the moment it
 * is not. A DMARC label carries the record name ("Published at
 * _dmarc.example.com"), and in a three-up card grid that label ate the row and
 * left the value about one character wide - so a DMARC record rendered as a
 * single vertical column of letters several thousand pixels tall. Named grid
 * areas mean no label length can reintroduce that.
 * ------------------------------------------------------------------------ */

.ehc-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem var(--fw-space-sm);
  padding: var(--fw-space-sm) var(--fw-space-md);
  border-radius: var(--fw-radius-md);
  background: var(--ehc-surface);
}

.ehc-record__label {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fw-text-muted);
  overflow-wrap: anywhere;
}

.ehc-record__copy {
  grid-area: 1 / 2 / 2 / 3;
  align-self: center;
  justify-self: end;
  width: 1.75rem;
  height: 1.75rem;
  border-color: transparent;
  color: var(--fw-text-muted);
}

.ehc-record:hover .ehc-record__copy { border-color: var(--fw-border); color: var(--fw-text-2); }
.ehc-record__copy:hover { border-color: var(--fw-brand); color: var(--fw-brand-text); }

.ehc-record__value {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--fw-text);
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ehc-record > .ehc-record__value { grid-area: 2 / 1 / 3 / 3; }

.ehc-record__value--wrap { display: block; color: var(--fw-text-2); }

/* --- Findings --------------------------------------------------------------
 *
 * A flat list. Severity is carried by a thin left rule and a coloured icon,
 * not by a filled box - these sit in the right-hand column of a section that
 * is already inside a panel, and a third frame around one sentence is what
 * made the old layout unreadable.
 * ------------------------------------------------------------------------ */

.ehc-findings {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-md);
  min-width: 0;
}

/* A heading belongs closer to its own list than the items are to each other. */
.ehc-findings__title { margin-bottom: calc(var(--fw-space-sm) - var(--fw-space-md)); }

.ehc-finding {
  padding-left: var(--fw-space-md);
  border-left: 2px solid var(--fw-border);
}

.ehc-finding--fail { border-left-color: var(--ehc-fail); }
.ehc-finding--warn { border-left-color: var(--ehc-warn); }
.ehc-finding--info { border-left-color: var(--ehc-info); }
.ehc-finding--ok   { border-left-color: var(--ehc-ok); }

.ehc-finding__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
}

.ehc-finding__icon { flex: 0 0 auto; font-size: 0.85em; }
.ehc-finding--fail .ehc-finding__icon { color: var(--ehc-fail); }
.ehc-finding--warn .ehc-finding__icon { color: var(--ehc-warn); }
.ehc-finding--info .ehc-finding__icon { color: var(--ehc-info); }
.ehc-finding--ok .ehc-finding__icon   { color: var(--ehc-ok); }

.ehc-finding__title {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--fw-text);
}

.ehc-finding__sev {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--fw-text-muted);
}

.ehc-finding__points {
  padding: 0.05rem 0.4rem;
  border-radius: var(--fw-radius-sm);
  background: var(--ehc-unknown-wash);
  color: var(--fw-text-muted);
  font-weight: 700;
  font-size: 0.78rem;
}

.ehc-finding--fail .ehc-finding__points { background: var(--ehc-fail-wash); color: var(--ehc-fail); }
.ehc-finding--warn .ehc-finding__points { background: var(--ehc-warn-wash); color: var(--ehc-warn); }
.ehc-finding--info .ehc-finding__points { background: var(--ehc-info-wash); color: var(--ehc-info); }

.ehc-finding__detail {
  margin: 0.3rem 0 0;
  color: var(--fw-text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* The one surface inside a finding that still gets a fill: it holds the record
   somebody is about to paste into a zone, so it has to be findable. */
.ehc-finding__fix {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  margin-top: var(--fw-space-sm);
  padding: var(--fw-space-sm) var(--fw-space-md);
  border-radius: var(--fw-radius-md);
  background: color-mix(in srgb, var(--fw-brand) 9%, var(--ehc-surface));
}

.ehc-finding__fix .ehc-record { padding: 0; background: none; }

.ehc-finding__fixtext {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fw-text);
}

.ehc-finding__fixtext i { color: var(--fw-brand-text); margin-right: 0.25rem; }

/* --- Tables ---------------------------------------------------------------- */

.ehc-table { font-size: 0.85rem; }
.ehc-table th { padding-inline: 0 var(--fw-space-md); }
.ehc-table td { padding-inline: 0 var(--fw-space-md); vertical-align: top; }
.ehc-table tr > :last-child { padding-right: 0; }
.ehc-table__raw td { padding-top: 0; border-top: none; }

/* --- SPF lookups and the include tree -------------------------------------- */

.ehc-lookups__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xs);
}

.ehc-tree,
.ehc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.ehc-tree__item,
.ehc-list__item {
  padding: 0.35rem 0;
  border-top: 1px dotted var(--fw-border);
  font-size: 0.85rem;
}

.ehc-tree__item:first-child,
.ehc-list__item:first-child { border-top: none; }

.ehc-tree__item--d1 { padding-left: 1.1rem; }
.ehc-tree__item--d2 { padding-left: 2.2rem; }
.ehc-tree__item--d3 { padding-left: 3.3rem; }
.ehc-tree__item--d4 { padding-left: 4.4rem; }
.ehc-tree__item--d5 { padding-left: 5.5rem; }
.ehc-tree__item--d6 { padding-left: 6.6rem; }

.ehc-tree__mech { font-weight: 600; color: var(--fw-text); }

.ehc-tree__resolved {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--fw-text-muted);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Blacklists
 * ------------------------------------------------------------------------ */

.ehc-bl__targets,
.ehc-bl__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-md);
}

.ehc-bl__target {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--fw-radius-sm);
  background: var(--ehc-surface);
  font-size: 0.78rem;
}

.ehc-bl__target-value { color: var(--fw-text); }
.ehc-bl__target-label { color: var(--fw-text-muted); overflow-wrap: anywhere; }

.ehc-bl__progress { color: var(--fw-text-muted); align-self: center; }

.ehc-bl__name { font-weight: 600; color: var(--fw-text); }

.ehc-bl__zone,
.ehc-bl__codes {
  display: block;
  margin-top: 0.1rem;
  color: var(--fw-text-muted);
}

.ehc-bl__table td { padding-block: 0.45rem; }
.ehc-bl__table th:first-child,
.ehc-bl__table td:first-child { padding-left: var(--fw-space-sm); }

/* A left accent rather than a full-bleed wash on every row, so a long run
   stays readable and the states still separate at a glance. A listed hit keeps
   its wash as well, because that is the one row nobody may miss. */
.ehc-bl__row--listed td:first-child  { box-shadow: inset 3px 0 0 var(--ehc-fail); }
.ehc-bl__row--info td:first-child    { box-shadow: inset 3px 0 0 var(--ehc-info); }
.ehc-bl__row--error td:first-child,
.ehc-bl__row--unknown td:first-child { box-shadow: inset 3px 0 0 var(--ehc-unknown); }

.ehc-bl__row--listed { background: var(--ehc-fail-wash); }

/*
 * A listing that does not count keeps the word "Listed" and loses the alarm.
 *
 * UCEPROTECT Level 3 lists whole ASNs, so it fires for every domain behind
 * Cloudflare or AWS. It is true that the IP is on the list and false that the
 * domain has a problem, so the row stays and the red goes. A red row that
 * nobody should act on is how people learn to ignore red rows.
 */
.ehc-bl__row--unscored { background: var(--ehc-unknown-wash); }
.ehc-bl__row--unscored td:first-child { box-shadow: inset 3px 0 0 var(--ehc-unknown); }
.ehc-bl__row--unscored .ehc-state--listed { color: var(--fw-text-2); }
.ehc-bl__row--unscored .ehc-state--listed i { color: var(--ehc-unknown); }

.ehc-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.82rem;
}

.ehc-state--listed { color: var(--ehc-fail); }
.ehc-state--clean  { color: var(--ehc-ok); }
.ehc-state--whitelisted { color: var(--ehc-ok); }
.ehc-state--info   { color: var(--ehc-info); }

/* Not green, not red, and visibly not a verdict. */
.ehc-state--error,
.ehc-state--unknown {
  padding: 0.05rem 0.45rem;
  border: 1px dashed var(--ehc-unknown);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text-muted);
  font-weight: 500;
  font-style: italic;
}

.ehc-bl-panel .ehc-findings { margin-top: var(--fw-space-lg); }

/* ---------------------------------------------------------------------------
 * The written report
 * ------------------------------------------------------------------------ */

.ehc-report__model { margin: var(--fw-space-md) 0 0; color: var(--fw-text-muted); }

/*
 * Centred, not left-aligned.
 *
 * Prose gets a measure cap because 1600px of running text is unreadable, but
 * capping it without centring just moves the problem: the report hugged the
 * left edge and left half the panel empty, which is the same dead space the
 * rest of this page was rebuilt to remove. The cap is the readable width; the
 * auto margins are what stop it looking like a rendering fault.
 */
.ehc-report__body {
  max-width: 72ch;
  margin-inline: auto;
  line-height: 1.65;
  color: var(--fw-text-2);
}

.ehc-report__body p { margin: 0 0 var(--fw-space-md); }
.ehc-report__body strong { color: var(--fw-text); }

.ehc-report__body code {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.ehc-report__h {
  margin: var(--fw-space-lg) 0 var(--fw-space-sm);
  color: var(--fw-text);
  line-height: 1.25;
}

.ehc-report__body > .ehc-report__h:first-child { margin-top: 0; }

/* frikwork strips the marker off every list, which is right for nav and menus
   and wrong for a numbered set of instructions. Put it back here only. */
.ehc-report__list {
  margin: 0 0 var(--fw-space-md);
  padding-left: 1.3rem;
}

ul.ehc-report__list { list-style: disc outside; }
ol.ehc-report__list { list-style: decimal outside; }

.ehc-report__list li { margin-bottom: 0.3rem; }

.ehc-report__pre {
  margin: 0 0 var(--fw-space-md);
  padding: var(--fw-space-md);
  border-radius: var(--fw-radius-md);
  background: var(--ehc-surface);
  overflow-x: auto;
}

/*
 * Wrap, do not scroll.
 *
 * These blocks hold DNS records somebody is going to copy into a zone or send
 * to a customer, and a long DMARC value ran off the right edge with the tail
 * only reachable by scrolling a box inside a page. Anything printed, pasted
 * into an email, or read on a phone lost the end of the record silently.
 * Wrapping keeps the whole value on screen; the leading indentation still
 * survives because only the line breaking changes.
 */
.ehc-report__pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fw-text);
}

/* ---------------------------------------------------------------------------
 * Narrower screens
 * ------------------------------------------------------------------------ */

/* One column below roughly 64rem: narrower than that and the findings column
   is too tight to hold a sentence without ragging badly. */
@media (max-width: 64rem) {
  .ehc-block__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .ehc-block__head { grid-template-columns: auto minmax(0, 1fr); }
  .ehc-block__status { grid-column: 2; justify-self: start; }
  .ehc-score { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--fw-space-lg); }
  .ehc-score__gauge { flex-direction: row; align-items: center; gap: var(--fw-space-sm); }
}

@media (max-width: 40rem) {
  .ehc-form__row { flex-direction: column; align-items: stretch; }
  .ehc-form__input { border-radius: var(--fw-radius-md); }
  .ehc-form__go {
    width: 100%;
    margin: var(--fw-space-sm) 0 0;
    border-radius: var(--fw-radius-md);
  }
  .ehc-kv { gap: 0 var(--fw-space-sm); }
  .ehc-kv__value { margin-left: 0; text-align: left; }
}