/* Service record page — page-only styles. Classes prefixed mmp-service-record-, tokens only.
   1. The "What Gets Logged" list: a two-column definition list that stacks cleanly on phones
      (mm-table would print a "Shows" pill beside every row at ≤700px).
   2. The example Minder ID card: the code must never wrap, so the chip drops below it on
      narrow phones instead. */

.mmp-service-record-log { display: grid; gap: 10px; margin: 0; }
.mmp-service-record-log__row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr); gap: 10px 28px; align-items: start; padding: 22px 28px; border-radius: var(--r-tile); background: var(--off); transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); }
.mmp-service-record-log__row:hover { transform: translateX(6px); background: var(--sky-soft); }
.mmp-service-record-log__row dt { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.mmp-service-record-log__row dt .mm-ico { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--green); color: var(--ink); }
.mmp-service-record-log__row dd { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 66ch; }
@media (max-width: 700px) {
  .mmp-service-record-log__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .mmp-service-record-log__row:hover { transform: none; }
  .mmp-service-record-log__row dt { font-size: 19px; }
  .mmp-service-record-log__row dd { font-size: 16px; }
}

.mmp-service-record-idcard .mm-idcard__id { white-space: nowrap; }
@media (max-width: 420px) {
  .mmp-service-record-idcard .mm-idcard__top { flex-wrap: wrap; }
}