@layer components {
  .table-select-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-group--inline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;

    label {
      font-weight: 500;
      margin: 0;
    }
  }
  .table-dim-input { inline-size: 5rem; }

  .table-select-grid-wrap { overflow-x: auto; }

  .table-select-grid {
    border-collapse: collapse;
    font-size: 0.9rem;

    th,
    td {
      border: 1px solid var(--color-border);
      padding: 0.35rem 0.5rem;
      text-align: center;
    }
    th {
      background: var(--color-surface-raised);
      font-weight: 500;
    }
    .table-header-input {
      font-size: 0.85rem;
      min-inline-size: 7rem;
    }
  }
  .table-select-corner { background: var(--color-surface-raised); }
  .table-select-cell { vertical-align: middle; }
  .table-select-label {
    cursor: pointer;
    display: block;
    padding: 0.2rem;
  }
  .table-select-hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0;
  }

  /* Preview */
  .table-select-preview {
    border-collapse: collapse;
    color: var(--exam-font-colour, inherit);
    font-size: calc(0.9rem * var(--exam-font-scale, 1));
    margin-block-start: 0.5rem;

    /* tr raises these above core.css's tr:last-child td, so the last row keeps its border. */
    tr th,
    tr td {
      background: var(--exam-bg-colour, transparent);
      border: 1px solid var(--color-border);
      padding: 0.4rem 0.75rem;
      text-align: center;
    }
    /* Headings show as authored, not in core.css's uppercase table-header style (#1323). */
    th {
      background: var(--exam-bg-colour, var(--color-surface-raised));
      color: inherit;
      font-size: inherit;
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
    }
    /* First column (heading + row labels) reads left-aligned, like the NESA papers. */
    tr > :first-child { text-align: start; }
    .table-row-header {
      background: var(--exam-bg-colour, transparent);
      font-weight: normal;
    }
    .correct { background: light-dark(oklch(0.95 0.05 140), var(--color-success-surface)); }
  }
}