.mm-checker { max-width: 48rem; margin-block: 2rem; text-align: left; }
.mm-checker *, .mm-checker *::before, .mm-checker *::after { box-sizing: border-box; }
.mm-checker [hidden] { display: none !important; }
.mm-checker label { display: block; font-weight: 600; margin-bottom: .65rem; }
.mm-checker-input-row { display: flex; align-items: stretch; gap: .75rem; }
.mm-checker input[type="text"] { width: 100%; min-width: 0; font: 400 1rem/1.5 "Inter", sans-serif; }
.mm-checker-input-row button { flex-shrink: 0; align-items: center; }
.mm-checker :is(button, input, summary):focus-visible { outline: 3px solid var(--mm-brand-500); outline-offset: 3px; }
.mm-checker button:disabled { cursor: wait; opacity: .65; }
.mm-checker .mm-checker-note, .mm-checker .mm-checker-limit { font-size: .8rem; line-height: 1.6; color: var(--mm-ink-600); margin: .8rem 0; }
.mm-checker .mm-checker-status { font-weight: 500; margin: 1rem 0; overflow-wrap: anywhere; }
.mm-checker-status[data-error="true"] { color: #a51d14; }
.mm-checker .mm-checker-report-heading, .mm-checker .mm-checker-preview-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.mm-checker .mm-checker-report-heading h2 { font: 600 1.45rem/1.4 "Inter", sans-serif; margin: 0; }
.mm-checker .mm-checker-section h3 { font: 600 1.1rem/1.5 "Inter", sans-serif; margin: 0 0 .8rem; }
.mm-checker .mm-checker-source { font-size: .8rem; color: var(--mm-ink-600); overflow-wrap: anywhere; margin: .8rem 0; }
.mm-checker-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-block: 1.25rem; }
.mm-checker-stat { padding: .8rem .5rem; border-radius: .6rem; background: var(--mm-brand-50); text-align: center; }
.mm-checker-stat strong { display: block; color: var(--mm-brand-700); font: 600 1.6rem/1.3 "Inter", sans-serif; }
.mm-checker-stat span { display: block; font-size: .75rem; color: var(--mm-ink-600); }
.mm-checker-section { border-top: 1px solid var(--mm-ink-200); padding-top: 1.5rem; margin-top: 1.5rem; }
.mm-checker .mm-checker-findings { list-style: none; padding: 0; margin: 0; }
.mm-checker-findings li { border-left: 3px solid var(--mm-brand-400); background: var(--mm-ink-50); padding: .65rem .8rem; font-size: .85rem; line-height: 1.55; }
.mm-checker-findings li[data-severity="warning"] { border-color: #b56a06; }
.mm-checker-facts { display: grid; grid-template-columns: minmax(100px, 30%) minmax(0, 1fr); margin: 1rem 0; gap: .6rem .85rem; font-size: .85rem; line-height: 1.55; }
.mm-checker-facts dt { font-weight: 600; }
.mm-checker-facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.mm-checker-devices { display: flex; gap: .4rem; }
.mm-checker-devices button { padding: .5rem .75rem; }
.mm-checker .mm-checker-devices button[aria-pressed="true"] { background: var(--mm-brand-700); color: #fff; border-color: var(--mm-brand-700); }
.mm-checker-preview-shell { border: 1px solid var(--mm-ink-200); border-radius: .6rem; padding: 1rem; background: #fff; }
.mm-checker-preview { width: 600px; max-width: 100%; margin-inline: auto; }
.mm-checker-preview[data-device="mobile"] { width: 360px; }
.mm-checker-preview-url { font: 12px/20px Arial, sans-serif; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-checker-preview-title { font: 400 20px/26px Arial, sans-serif; color: #1a0dab; margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-checker-preview-description { font: 400 14px/22px Arial, sans-serif; color: #4d5156; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.mm-checker-preview[data-device="mobile"] .mm-checker-preview-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.mm-checker-preview[data-device="mobile"] .mm-checker-preview-description { -webkit-line-clamp: 3; }
.mm-checker .mm-checker-details { border-top: 1px solid var(--mm-ink-200); padding: 1rem 0; }
.mm-checker-details summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.mm-checker-details > p { font-size: .85rem; margin-top: .8rem; }
.mm-checker-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 1rem; }
.mm-checker .mm-checker-table { display: table; table-layout: fixed; border-collapse: collapse; width: 100%; min-width: 450px; margin: 0; font-size: .8rem; line-height: 1.5; }
.mm-checker .mm-checker-table :is(th, td) { padding: .65rem; border: 1px solid var(--mm-ink-200); vertical-align: top; text-align: left; overflow-wrap: anywhere; white-space: pre-line; }
.mm-checker .mm-checker-table th { background: var(--mm-ink-50); }
.mm-checker .mm-checker-limit { padding: 1rem; border-radius: .6rem; background: var(--mm-ink-50); }
@media (max-width: 600px) {
  .mm-checker { padding: 1rem; }
  .mm-checker-input-row { flex-direction: column; }
  .mm-checker-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-checker-facts { grid-template-columns: 1fr; gap: .15rem; }
  .mm-checker-facts dd { margin-bottom: .65rem; }
}
