@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 the tool: the element carrying the fullscreen controller
     (each tool's own outer wrapper). The tool itself grows to fill the space; exiting
     fullscreen just stops these rules applying, so it reverts to its normal/resized size. */
  [data-controller~="fullscreen"]:fullscreen {
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 2rem;

    /* The item prompt keeps its natural height; the tool's form and the tool grow below it. */
    > form {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-block-size: 0;
    }
    /* The written working under a graph is not part of the full screen board. */
    .graph-working { display: none; }

    /* 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,
    .graph-outer {
      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; }

    /* Graph: the toolbar and the Reset/Exit row share the top line, and the figure takes
       the rest. The board is sized from the figure's own box (container units), so it
       fills whichever of height or width runs out first at its 4:3 ratio. */
    .graph-outer {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto minmax(0, 1fr);

      > * { grid-column: 1 / -1; }
      /* The toolbar and its hint are centred over the board (the screen centre). Equal side
         padding keeps them clear of the Reset/Exit buttons, which sit in the same row at the
         end; a toolbar too wide for what is left wraps. */
      > .graph-toolbar-host {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-inline: 14rem;

        .graph-toolbar { align-self: center; }
        .graph-toolbar__status { justify-content: center; }
      }
      > .tool-fullscreen-row {
        grid-column: 2;
        grid-row: 1;
        margin-block-end: 0;
        /* Above the toolbar host, which spans the whole row and would swallow the clicks. */
        z-index: 1;
      }
      > .graph-figure { grid-row: 2; }
    }
    .graph-figure {
      container-type: size;
      /* Equal side tracks keep the board itself dead centre, with the y title hugging its left edge. */
      grid-template-areas:
        ".      title ."
        "ytitle board ."
        ".      xtitle .";
      grid-template-columns: 1fr auto 1fr;

      .graph-axis-title--y { justify-self: end; }
      max-inline-size: none;
    }
    /* ponytail: 6rem and 4rem approximate the axis titles around the board; measure them if titles grow */
    .graph-board {
      inline-size: min(100cqi - 4rem, (100cqb - 6rem) * 4 / 3);
      max-inline-size: none;
    }
  }

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

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