@layer components {
  /* A fill-in table (#1611). Column widths come from each <col>'s --fill-table-col-width (narrow
     or wide, set by FillTable#width_pct); --fill-table-lines is the authored answer cell height. */
  .fill-table {
    border-collapse: collapse;
    color: var(--exam-font-colour, inherit);
    font-size: calc(0.95rem * var(--exam-font-scale, 1));
    inline-size: 100%;
    margin-block-start: 0.5rem;
    table-layout: fixed;

    col { inline-size: var(--fill-table-col-width, auto); }

    /* 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.5rem;
      text-align: start;
      vertical-align: top;
    }
    /* Headings show as authored, not in core.css's uppercase table-header style. */
    th {
      color: inherit;
      font-size: inherit;
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
    }
  }
  .fill-table--italic-headers th { font-style: italic; }

  /* Locked prefill keeps the line breaks it was written with. */
  .fill-table-fixed { white-space: pre-wrap; }

  /* The cell's Lexxy editor (#1700): --fill-table-lines sets the starting height, and the editor
     grows with what is typed. The border, focus ring and colours come from .item-student-richtext. */
  .fill-table-input {
    font-size: inherit;
    inline-size: 100%;
    min-block-size: calc(var(--fill-table-lines, 3) * 1.6em);
  }
}