/* #1165 — mcq items whose choices are presented as rows of one shared table
   ("Which row correctly identifies…") rather than the plain choice list. */
@layer components {
  /* Authoring: column headings row + per-row cell editors */
  .mcq-table-headings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
  }
  .mcq-table-heading-cell {
    flex: 1 1 10rem;
    min-inline-size: 8rem;

    label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      margin-block-end: 0.2rem;
    }
    .lexxy-editor--compact { inline-size: 100%; }
  }

  .choice-row--table { align-items: flex-start; }
  .mcq-table-row-cells {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  /* Display: student input, readonly, preview, all share the same table */
  .mcq-table-wrap {
    margin: 0.5rem 0;
    overflow-x: auto;

    /* Phone width: stack each row into a labelled block instead of scrolling
       the page horizontally (#1165 acceptance criteria). */
    @media (max-width: 480px) { overflow-x: visible; }
  }

  .mcq-table {
    border-collapse: collapse;
    color: var(--exam-font-colour, inherit);
    font-size: calc(0.95rem * var(--exam-font-scale, 1));
    inline-size: 100%;

    /* tr raises these above core.css's tr:last-child td, so the last row keeps its border. */
    tr th,
    tr td {
      border: 1px solid var(--color-border);
      padding: 0.5rem 0.75rem;
      text-align: start;
      vertical-align: middle;
    }
    /* Headings show as authored, not in core.css's uppercase table-header style (#1316). */
    th {
      background: var(--exam-bg-colour, var(--color-surface-raised));
      color: inherit;
      font-size: inherit;
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
    }

    @media (max-width: 480px) {
      &,
      tbody,
      tr {
        display: block;
        inline-size: 100%;
      }
      thead { display: none; }
      tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        margin-block-end: 0.75rem;
        overflow: hidden;
      }
      td {
        border: none;
        border-block-start: 1px solid var(--color-border);
        display: block;
      }
      td:first-child { border-block-start: none; }
    }
  }
  .mcq-table-corner { background: var(--exam-bg-colour, var(--color-surface-raised)); }

  .mcq-table-cell {
    flex: 1 1 10rem;
    min-inline-size: 8rem;

    .lexxy-editor--compact { inline-size: 100%; }

    @media (max-width: 480px) {
      &[data-heading]::before {
        content: attr(data-heading) ": ";
        font-weight: 600;
      }
    }
  }

  /* Stays a table cell (display: flex here broke the column's layout, #1316); its inline
     children sit on one line. */
  .mcq-table-row-select {
    inline-size: 1%;
    white-space: nowrap;

    > * { vertical-align: middle; }
    > * + * { margin-inline-start: 0.5rem; }
  }
  .mcq-table-radio-label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
  }
  .mcq-table-row-letter { font-weight: 600; }

  /* States only set --mcq-table-row-background. The student view makes the whole row the
     click target (table_row_select_controller.js); readonly / marking key colouring matches
     the plain choice list. */
  .mcq-table-row {
    background: var(--mcq-table-row-background, transparent);

    tbody &[data-controller~="table-row-select"] {
      cursor: pointer;

      &:hover { --mcq-table-row-background: oklch(var(--oklch-canvas-sunken)); }
    }
  }
  .mcq-table-row--selected { --mcq-table-row-background: oklch(var(--oklch-canvas-raised)); }
  .mcq-table-row--correct { --mcq-table-row-background: var(--color-success-surface); }
  .mcq-table-row--incorrect { --mcq-table-row-background: var(--color-danger-surface); }
}