@layer components {
  /* Shared "Full screen" toggle row for interactive tool areas (drawing, python,
     database, pseudocode): sits above the tool's own bordered box, end-aligned. */
  .tool-fullscreen-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-block-end: 0.5rem;
  }

  /* Full screen expands just this item, its own prompt plus the tool, so the
     student keeps what they're being asked in view while the tool (drawing,
     python, database) is maximised, without pulling in the rest of the question.
     The tool itself grows to fill the remaining space; exiting fullscreen just
     stops these rules applying, so it reverts to its normal/resized size. */
  .student-item:fullscreen {
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 2rem;

    /* The tool's own <form> wrapper shouldn't count as a flex layer: its
       children (the *-wrap divs below) act as direct flex children instead. */
    > form { display: contents; }

    /* Each tool and the boxes inside it grow to fill the space. */
    .excalidraw-outer,
    .py-tool-outer,
    .idb-student-wrap,
    .pseudo-outer,
    .spreadsheet-outer,
    .excalidraw-wrap,
    .spreadsheet-wrap,
    .py-editor-wrap,
    .py-panes,
    .idb-result-wrap,
    .idb-result-table-wrap,
    .pseudo-student-wrap,
    .pseudo-editor-wrap {
      flex: 1;
      min-block-size: 0;
    }
    .excalidraw-outer,
    .spreadsheet-outer,
    .py-tool-outer,
    .py-editor-wrap,
    .pseudo-outer {
      display: flex;
      flex-direction: column;
    }
    .excalidraw-canvas,
    .spreadsheet-canvas { block-size: 100%; }
    .py-panes,
    .idb-result-table-wrap,
    .pseudo-editor-wrap { block-size: auto; }
  }

  /* Rich-text images (question stems, instructions) open full screen on click. */
  .trix-content img {
    cursor: zoom-in;

    &:fullscreen {
      background: #000;
      object-fit: contain;
    }
  }
}