/* Text and call metrics, plus the number reputation banner. */

/* The top ribbon. Wider tiles than .stat-grid, because every tile here carries
   a second line of small print: "2000 sent to 200 people across 400 numbers"
   is the whole point of the figure and does not fit under a 110px box. */
.mx-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mx-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  /* Grid children default to min-width:auto, so a long "unique" line pushes
     the next tile off the row instead of wrapping inside its own. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.mx-tile b { display: block; font-size: 21px; line-height: 1.15; }
.mx-tile span {
  display: block; color: var(--muted); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; margin-top: 2px;
}
.mx-tile em { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.mx-tile.good { border-left-color: var(--green); }
.mx-tile.warn { border-left-color: var(--amber); }
.mx-tile.bad { border-left-color: var(--red); }
.mx-tile.bad b { color: var(--red); }

/* A figure the data cannot support. Deliberately grey and quiet rather than
   red: nothing is wrong, the measurement simply does not exist, and dressing
   that up as an alarm is its own kind of lie. */
.mx-tile.unmeasured { background: #f8fafc; border-style: dashed; }
.mx-tile.unmeasured b { font-size: 15px; color: var(--muted); font-weight: 700; padding-top: 4px; }
.mx-tile.unmeasured em {
  text-decoration: underline dotted; cursor: help; text-transform: uppercase;
  letter-spacing: .3px; font-weight: 700; font-size: 10.5px;
}

.mx-scope { margin: 0 0 12px; font-size: 12.5px; }
.mx-fine { font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 6px; }
.banner.mx-honest { font-weight: 600; }
.banner.mx-honest .mx-fine { font-weight: 400; }

.mx-range .mx-dates { display: flex; align-items: center; gap: 8px; }
.mx-range .mx-dates input[type=date] {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}

.mx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.mx-block { margin-top: 12px; overflow: hidden; }
.mx-tight { padding: 8px 16px; }
.mx-right { text-align: right; }

/* Ten columns of numbers do not fit a narrow window, and the fix is not to
   shrink the type until it cannot be read. The table scrolls inside its own
   card instead of pushing the page sideways. */
.mx-scroll { overflow-x: auto; }
table.mx-table { min-width: 900px; }
table.mx-table td, table.mx-table th { white-space: nowrap; }
table.mx-table td.mx-body {
  white-space: normal; max-width: 340px; min-width: 0;
  overflow-wrap: anywhere; color: var(--muted); font-size: 12.5px;
}
.mx-mono { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mx-bad { color: var(--red); font-weight: 600; }
.mx-warn { color: var(--amber); font-weight: 600; }

tr.mx-acct { cursor: pointer; }
tr.mx-acct:hover { background: #f8fafc; }
tr.mx-acct td:first-child b::before {
  content: '\25B8'; display: inline-block; width: 14px; color: var(--muted);
}
tr.mx-acct.open td:first-child b::before { content: '\25BE'; }
tr.mx-numrow td { background: #f8fafc; font-size: 13px; }
.mx-indent { display: inline-block; width: 22px; }

.mx-tips { margin: 0; padding-left: 18px; }
.mx-tips li { margin-bottom: 7px; line-height: 1.5; }

/* ---- Reputation banner ---- */
.mx-rep-banner {
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 9px; padding: 12px 14px; margin-bottom: 10px;
}
.mx-rep-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* icon() emits an SVG with no width or height and the global default is 16px,
   which disappears next to 14px bold text in a banner this size. */
.mx-rep-head svg { width: 18px; height: 18px; flex: none; }
.mx-rep-why { margin: 8px 0 0 0; padding-left: 20px; font-size: 13px; font-weight: 600; }
.mx-rep-why li { margin-bottom: 3px; }
.mx-rep-tips { margin-top: 8px; font-size: 12.5px; }
.mx-rep-tips summary { cursor: pointer; font-weight: 700; }
.mx-rep-tips ul { margin: 7px 0 0 0; padding-left: 20px; font-weight: 400; line-height: 1.55; }
.mx-rep-tips li { margin-bottom: 5px; }
.mx-rep-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid #fcd34d;
}
.mx-rep-foot .spacer, .mx-rep-foot a { margin-left: auto; }
.mx-rep-foot .muted { color: #92400e; opacity: .85; }
.mx-rep-foot a { color: #92400e; text-decoration: underline; }

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