/**
 * spec-table block styles
 */

@layer mm-block {
  .mm-x-spec-scroll {
    margin-top: 22px;
    overflow-x: auto;
    border-radius: var(--mmx-radius);
    box-shadow: 0 0 0 1px var(--mmx-line);
  }

  .mm-x-spec-table {
    width: 100%;
    border-collapse: collapse;
  }

  .mm-x-spec-table th, .mm-x-spec-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mmx-line);
    text-align: left;
    vertical-align: top;
  }

  .mm-x-spec-table th {
    background: #f2f4f7;
    color: #2c3440;
  }

  /* Classic label/value shape: narrow first column. */
  .mm-x-spec-table-kv th {
    width: 35%;
  }

  /* Multi-column matrices keep readable cells and scroll inside the wrapper. */
  .mm-x-spec-table:not(.mm-x-spec-table-kv) th,
  .mm-x-spec-table:not(.mm-x-spec-table-kv) td {
    min-width: 120px;
  }

  .mm-x-spec-table tbody tr:last-child th, .mm-x-spec-table tbody tr:last-child td {
    border-bottom: 0;
  }
}

@layer mm-responsive {
  /* ── Responsive ───────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .mm-x-spec-table th,
    .mm-x-spec-table td {
      padding: 10px 12px;
      font-size: 13px;
    }
    /* Only the label/value shape stacks; wider tables scroll horizontally. */
    .mm-x-spec-table-kv th,
    .mm-x-spec-table-kv td {
      display: block;
      width: 100%;
    }
    .mm-x-spec-table-kv th {
      border-bottom: 0;
      padding-bottom: 4px;
      background: #f2f4f7;
    }
    .mm-x-spec-table-kv td {
      padding-top: 0;
    }
  }
}