/* Review Machine pages: "How we count every invitation".
   The full block sits in #panel on the product page; a compact one sits in #measurement on the
   industry pages (src/review-machine-industries/build.py). The status pills use the colours of
   the client's admin panel, so a prospect sees the same words and colours they will work with.
   Tokens come from styles.css. */

.rmc {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--fog);
  max-width: 960px;
}

.rmc--compact { margin-top: var(--space-xl); padding-top: 0; border-top: 0; }

.rmc__title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); }
.rmc--compact .rmc__title { font-size: var(--font-size-lg); }
.rmc__sub { font-size: var(--font-size-lg); margin: var(--space-xl) 0 var(--space-sm); }

.rmc__lead,
.rmc__text { color: var(--graphite); max-width: 70ch; }
.rmc__lead { margin-bottom: var(--space-lg); }
.rmc__text { margin-top: var(--space-md); }
.rmc--compact .rmc__lead,
.rmc--compact .rmc__text { font-size: var(--font-size-sm); }

.rmc__note { margin-top: var(--space-sm); font-size: var(--font-size-sm); color: var(--graphite); }

/* The table sits on a white card, like the Clients table in the panel. It is built to fit a
   390px phone without scrolling (see the phone rules below); the overflow is only a safety net. */
.rmc__box {
  position: relative;
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.rmc__table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }

.rmc__table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--bg-alt);
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--fog);
  white-space: nowrap;
}

.rmc__table tbody th,
.rmc__table tbody td {
  text-align: left;
  font-weight: var(--font-weight-regular);
  vertical-align: baseline;
  padding: 12px var(--space-md);
  border-bottom: 1px solid var(--fog);
}

.rmc__table tbody tr:last-child > * { border-bottom: 0; }
.rmc__table tbody th { width: 1%; white-space: nowrap; }
.rmc__table tbody td { color: var(--ink); }
.rmc__table tbody td + td { color: var(--graphite); width: 38%; }

/* Phones: the three-column table becomes one block per status. The compact two-column table
   stays a table, with the pill beside its line, so it keeps its short height. */
@media (max-width: 639px) {
  .rmc:not(.rmc--compact) .rmc__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rmc:not(.rmc--compact) .rmc__table,
  .rmc:not(.rmc--compact) .rmc__table tbody,
  .rmc:not(.rmc--compact) .rmc__table tr,
  .rmc:not(.rmc--compact) .rmc__table tbody th,
  .rmc:not(.rmc--compact) .rmc__table tbody td { display: block; width: auto; }
  .rmc:not(.rmc--compact) .rmc__table tbody tr { padding: 14px var(--space-md); border-bottom: 1px solid var(--fog); }
  .rmc:not(.rmc--compact) .rmc__table tbody tr:last-child { border-bottom: 0; }
  .rmc:not(.rmc--compact) .rmc__table tbody th,
  .rmc:not(.rmc--compact) .rmc__table tbody td { padding: 0; border: 0; }
  .rmc:not(.rmc--compact) .rmc__table tbody th { margin-bottom: 8px; }
  .rmc:not(.rmc--compact) .rmc__table tbody td + td { width: auto; margin-top: 8px; }
  .rmc__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 2px;
  }
  .rmc--compact .rmc__table tbody th { padding: 10px 4px 10px 12px; }
  .rmc--compact .rmc__table tbody td { padding: 10px 12px; }
}

/* Status pills, in the admin panel's palette. */
.rmc-st {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  border: 1px solid;
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}

.rmc-st--none { color: #6B7280; background: transparent; border-style: dashed; border-color: #D1D5DB; font-weight: var(--font-weight-medium); }
.rmc-st--scheduled { color: var(--graphite); background: var(--bg-alt); border-color: #D1D5DB; }
.rmc-st--ready { color: #B45309; background: rgba(180, 83, 9, 0.1); }
.rmc-st--sent { color: #047857; background: rgba(4, 120, 87, 0.1); }
.rmc-st--delivered { color: var(--white); background: #047857; border-color: #047857; }
.rmc-st--failed { color: #B91C1C; background: rgba(185, 28, 28, 0.08); }
.rmc-st--cancelled { color: #6B7280; background: var(--bg-alt); border-color: #D1D5DB; }

/* Progress: the five steps as one line of dots (a column on phones). Each step draws the line
   to the next one. The last dot is hollow because that step is the customer's own word. */
.rmc-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.rmc-ladder li {
  position: relative;
  padding-left: 26px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ink);
}

.rmc-ladder li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #047857;
}

.rmc-ladder li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 21px;
  bottom: -13px;
  border-left: 2px solid rgba(4, 120, 87, 0.3);
}

.rmc-ladder .rmc-ladder__own::before { background: transparent; border: 2px solid #047857; }

.rmc-ladder small {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--graphite);
}

@media (min-width: 640px) {
  .rmc-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
  .rmc-ladder li { padding-left: 0; padding-top: 24px; }
  .rmc-ladder li::before { top: 0; }
  .rmc-ladder li:not(:last-child)::after {
    left: 16px;
    right: calc(4px - var(--space-md));
    top: 5px;
    bottom: auto;
    border-left: 0;
    border-top: 2px solid rgba(4, 120, 87, 0.3);
  }
}