@layer components {
  .paper {
    display: grid;
    gap: var(--block-space);
  }

  .paper__header {
    padding-block-end: var(--block-space);
    border-block-end: var(--border);
  }

  .paper__score {
    font-size: var(--text-large);
  }

  .paper__questions {
    display: grid;
    gap: var(--block-space);
    margin: 0;
    padding: 0;
    list-style: decimal inside;

    .paper__question::marker {
      font-weight: 700;
    }
  }

  .paper__section {
    display: grid;
    gap: var(--block-space-half);
  }

  .paper__questions--nested {
    padding-inline-start: var(--inline-space-double);
  }

  .paper__heading {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: 700;
    line-height: 1.15;
  }

  .paper__question--finding .paper__prompt,
  .paper__question--unanswered .paper__prompt {
    color: var(--color-error-text);
  }

  .paper__options {
    display: grid;
    gap: var(--block-space-half);
    margin-block-start: var(--block-space-half);

    > .btn {
      --btn-background: transparent;

      justify-content: flex-start;
      line-height: normal;
      margin-block: 0;
      padding-block: 0.35em;
      text-align: start;
    }
  }

  /* The marked result: the pills are read, never pressed, and a mark recolours the whole pill. */
  .paper__option {
    pointer-events: none;
    border-color: var(--color-ink-light);
  }

  .paper__option--chosen {
    --mark: var(--color-link);
    --mark-text: var(--color-ink-inverted);
  }

  .paper__option--right {
    --mark: var(--color-success-button);
    --mark-text: var(--color-ink-inverted);
  }

  .paper__option--wrong {
    --mark: var(--color-error-button);
    --mark-text: var(--color-ink-inverted);
  }

  .paper__check {
    margin-inline-start: auto;
  }

  /* Outside @media screen these rules are the printed paper, which print.css finishes with its black rules. */
  .paper--form {
    .paper__page {
      display: grid;
      gap: var(--block-space);
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: 40rem;
    }

    .paper__header {
      display: grid;
      padding: 0;
      border-radius: var(--radius-lg);

      @media screen {
        background-color: var(--color-canvas);
        box-shadow: var(--shadow-card);
      }
    }

    .paper__title {
      margin: 0;
      padding: var(--block-space);
      font-size: var(--text-large);
      font-weight: 700;
      line-height: 1.15;
      border-block-end: var(--border);

      @media screen {
        font-size: var(--text-medium);
      }
    }

    .paper__picker {
      font-size: var(--text-small);
      font-weight: 400;
      margin-inline-start: var(--inline-space-half);
    }

    .paper__field {
      display: grid;
      grid-template-columns: 8rem minmax(0, 1fr);
      align-items: baseline;
      column-gap: var(--inline-space-double);
      padding: var(--block-space);

      @media screen {
        grid-template-columns: 9rem minmax(0, 1fr);
        padding: var(--block-space-half) var(--block-space);

        @media (width < 640px) {
          grid-template-columns: minmax(0, 1fr);
          row-gap: 0.125rem;
        }
      }
    }

    .paper__label {
      color: var(--color-ink-dark);
      font-size: var(--text-x-small);
      font-weight: 600;

      @media screen {
        font-size: var(--text-small);
      }
    }

    .paper__fields:not(:has(option[value="elsewhere"]:checked)) .paper__elsewhere {
      display: none;
    }

    .paper__legend {
      display: grid;
      gap: var(--block-space-half);
      padding: var(--block-space);
    }

    .paper__section {
      gap: 0;
      border: var(--border);
      border-block-start: 0;
      border-radius: var(--radius-lg);

      @media screen {
        background-color: var(--color-canvas);
        border: 0;
        box-shadow: var(--shadow-card);
      }

      > .paper__questions:first-child {
        border-block-start: var(--border);
        border-start-start-radius: var(--radius-lg);
        border-start-end-radius: var(--radius-lg);

        @media screen {
          border-block-start: 0;
        }
      }

      > .paper__inset {
        margin: var(--block-space-half) var(--block-space);
      }

      > .paper__body {
        padding: var(--block-space-half);

        @media screen {
          padding: 0;
        }
      }

      > .paper__box + .paper__box {
        border-block-start: var(--border);
      }

      .paper__section {
        border: 0;
        box-shadow: none;
      }
    }

    .paper__section[id] {
      scroll-margin-block-start: var(--block-space);
    }

    .paper__heading {
      padding: var(--block-space-half) var(--block-space);
      border-block-end: var(--border);
      border-start-start-radius: var(--radius-lg);
      border-start-end-radius: var(--radius-lg);
    }

    .paper__heading-link {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--inline-space);
      color: inherit;
      text-decoration: none;
    }

    .paper__questions {
      gap: 0;
      list-style: none;
    }

    .paper__questions--nested {
      padding-inline-start: 0;
    }

    .paper__question {
      display: grid;
      grid-template-columns: 2.5rem minmax(0, 1fr);

      @media screen {
        grid-template-columns: minmax(0, 1fr);
      }

      & + & {
        border-block-start: var(--border);
      }
    }

    .paper__number {
      padding-block: var(--block-space);
      font-weight: 700;
      text-align: center;

      @media screen {
        display: none;
      }
    }

    .paper__box {
      padding: var(--block-space);
    }

    .paper__question > .paper__box {
      display: grid;
      gap: var(--block-space-half);
    }

    .paper__list {
      padding-inline-start: var(--block-space-double);
    }

    .paper__question--finding {
      box-shadow: inset 3px 0 0 var(--color-error);

      .paper__number {
        color: var(--color-error-text);
      }
    }

    /* A mark fills the drawn square on paper. On screen an option shows its own .checkbox, or .checkbox-mark when read back, in place of the square. */
    .paper__options > .btn {
      &::before {
        content: "";
        display: inline-grid;
        place-items: center;
        flex: none;
        inline-size: 1.1em;
        block-size: 1.1em;
        background-color: var(--mark, transparent);
        border: 2px solid var(--mark, currentColor);
        border-radius: var(--radius-xs);
        color: var(--mark-text, currentColor);
        font-weight: 700;
        line-height: 1;
      }

      @media screen {
        border-color: transparent;
        border-radius: var(--radius-lg);

        &::before {
          inline-size: 1.25em;
          block-size: 1.25em;
          background-color: transparent;
          border: 2px solid var(--color-ink);
          border-radius: var(--radius-sm);
        }

        &:has(> :is(.checkbox, .checkbox-mark))::before {
          display: none;
        }

        /* buttons.css lays a toggle's input over the whole pill and reverses the pill once checked. Here the box stays in the flow and takes the mark. */
        > .checkbox {
          position: static;
          inset: auto;
          display: grid;
          border-color: var(--color-ink);
          border-radius: var(--radius-xs);
          flex: none;
          color: var(--mark, var(--color-link));
          outline: 0;

          &[type="radio"] {
            border-radius: 50%;
          }
        }
      }

      &:has(input:checked) {
        --btn-background: transparent;
        --btn-color: var(--color-ink);
        --mark: var(--color-link);
        --mark-text: var(--color-ink-inverted);
      }
    }

    .paper__line {
      margin: 0;

      @media print {
        padding-inline: 0;
        background: transparent;
        border: 0;
        border-block-end: 1px solid var(--color-ink-medium);
        border-radius: 0;

        &:focus-visible {
          outline: 0;
        }
      }

      @media screen {
        &:not(input, select, textarea) {
          padding-inline: 0;
          background: transparent;
          border: 0;
          border-radius: 0;
        }
      }
    }

    .paper__note {
      display: flex;
      align-items: baseline;
      gap: var(--inline-space);
      margin: 0;

      > .paper__line {
        flex: 1;
      }
    }

    .paper__index {
      display: grid;
      gap: var(--block-space-half);
      padding-block-end: var(--block-space);
      border-block-end: var(--border);
      scroll-margin-block-start: var(--block-space);
    }

    .paper__index-heading {
      margin: 0;
      color: var(--color-ink-dark);
      font-size: var(--text-small);
      font-weight: 700;
      line-height: 1.15;
    }

    .paper__index-list {
      display: grid;
      gap: var(--block-space-half);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .paper__index-link {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--inline-space);
      color: var(--color-ink);
      text-decoration: none;

      &:hover {
        color: var(--color-link);
      }
    }

    .paper__count {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
      font-weight: 400;
      white-space: nowrap;
    }

    .paper__body,
    .paper__sections {
      display: grid;
      row-gap: var(--block-space);
    }

    /* Only the page's own index opens the side column; a checklist nested in a section renders none. */
    @media (width >= 960px) {
      .paper__page:has(> .paper__body > .paper__index) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr);
        column-gap: var(--block-space-double);
        max-inline-size: none;

        > * {
          grid-column: 2;
        }

        > .paper__body {
          grid-column: 1 / -1;
          grid-template-columns: subgrid;
          align-items: start;

          > .paper__sections {
            grid-column: 2;
          }
        }
      }

      .paper__index {
        grid-column: 1;
        inline-size: min(12rem, 100%);
        justify-self: end;
        position: sticky;
        inset-block-start: var(--block-space);
        max-block-size: calc(100dvh - var(--block-space-double));
        overflow-y: auto;
        padding-block-end: 0;
        border-block-end: 0;
      }
    }
  }

  .paper--sheet {
    .paper__page > .btn {
      justify-self: start;
    }

    .paper__question,
    .paper__index-item {
      margin-block: 0.25rem;
    }

    input {
      font-size: max(16px, 1em);
    }

    .paper__question--unanswered {
      box-shadow: inset 3px 0 0 var(--color-error);

      .paper__number {
        color: var(--color-error-text);
      }
    }

    @media print {
      .paper__options > .btn:has(input:checked)::before {
        content: "✓";
      }
    }

    .paper__missed {
      margin: 0;
      color: var(--color-error-text);
    }

    .paper__options--conformity {
      > .btn:has(input[value="ok"]:checked) {
        --mark: var(--color-success-button);
        --mark-text: var(--color-ink-inverted);
      }

      > .btn:has(input[value="not_ok"]:checked) {
        --mark: var(--color-error-button);
        --mark-text: var(--color-ink-inverted);
      }
    }

    @media (any-hover: none) {
      .paper__options > .btn {
        min-block-size: 3rem;
      }
    }
  }

  .paper__table {
    inline-size: 100%;
    margin-block: 1.5rem;
    background-color: var(--color-canvas);
    border-collapse: collapse;
    font-size: var(--text-small);

    th,
    td {
      padding: var(--block-space-half) var(--inline-space);
      text-align: start;
      vertical-align: top;
      overflow-wrap: anywhere;
      border-block-end: var(--border);
    }

    :is(th, td) + :is(th, td) {
      border-inline-start: var(--border);
    }

    .paper__table-text {
      white-space: pre-line;
    }

    th {
      color: var(--color-ink-dark);
      font-size: var(--text-x-small);
      font-weight: 600;
      background-color: var(--color-ink-lightest);
    }

    tr:nth-child(even) {
      background-color: var(--color-ink-lightest);
    }

    tbody tr:last-child td {
      border-block-end: 0;
    }
  }

  .paper__rows {
    --row-tracks: repeat(var(--columns), minmax(0, 1fr)) calc(2.25 * var(--text-x-small));

    display: grid;
    gap: var(--block-space-half);
    justify-items: start;
    margin-block-start: var(--block-space-half);

    > .steps,
    > .paper__row-labels {
      inline-size: 100%;
    }

    > .btn {
      margin-block: 0;
    }

    .paper__row-labels,
    .paper__row {
      display: grid;
      gap: var(--inline-space-half);
      grid-template-columns: var(--row-tracks);
    }

    .paper__row-labels {
      color: var(--color-ink-dark);
      font-weight: 600;
      overflow-wrap: anywhere;

      > .paper__row-label {
        padding-inline: var(--inline-space-half);
      }
    }

    .paper__row {
      --btn-size: 2.25em;

      align-items: start;
      margin-block: 0.25rem;
      padding-block: calc(var(--block-space-half) / 2);

      > .btn {
        margin: 0;
      }
    }

    .input {
      display: block;
      inline-size: 100%;
      margin: 0;
      padding: calc(var(--block-space-half) / 2) var(--inline-space-half);
      font-size: var(--text-small);
      line-height: 1.4;
      resize: none;
    }

    /* Without field-sizing, the autoresize clone sets the height, so it is spaced as the answer is. */
    .autoresize__wrapper {
      min-inline-size: 0;

      &::after {
        padding: calc(var(--block-space-half) / 2) var(--inline-space-half);
        line-height: 1.4;
        overflow-wrap: anywhere;
      }
    }

    @media (width < 640px) {
      .paper__row-labels {
        display: none;
      }

      .paper__row {
        grid-template-columns: minmax(0, 1fr);

        > .btn {
          justify-self: end;
        }

        & + .paper__row {
          border-block-start: var(--border);
        }
      }

      .input {
        font-size: max(16px, var(--text-small));
      }
    }
  }

  .paper__grid {
    display: grid;
    gap: var(--block-space-half);
    justify-items: start;
    margin-block-start: var(--block-space-half);
    overflow-x: auto;

    > .paper__table {
      border: var(--border);
    }
  }

  .paper__table--preview td {
    block-size: 1.75em;
  }

  .paper--filled {
    .paper__status {
      padding: var(--block-space-half) var(--block-space);
      border-block-end: var(--border);
    }

    @media print {
      .paper__option:is(.paper__option--chosen, .paper__option--right, .paper__option--wrong)::before {
        content: "✓";
      }
    }

    .paper__written {
      min-block-size: 1.5em;
      padding-block: 0.25rem;
      white-space: pre-line;
    }

    .paper__blank {
      color: var(--color-ink-dark);
    }

    .paper__comments {
      padding: var(--block-space-half) var(--block-space);
      border: var(--border);

      @media screen {
        border-radius: var(--radius-lg);
      }
    }
  }
}