@layer components {
  @media (min-width: 1100px) {
    /* The panel's width and its edge follow --panel-width (layout.css). 248px: the menu. */
    body.panel-open.panel-fullscreen { --panel-width: calc(100vw - 248px); }
    body.panel-open.panel-fullscreen :is(.app-main, .panel-resize) { display: none; }
    /* The pane and its bars take the whole width (28px sides, as the mock-up); the text column is the document body's own. */
    body.panel-fullscreen .app-panel [data-panel-pane]:has(> .documents-panel) { display: block; }
    body.panel-fullscreen .app-panel .documents-panel,
    body.panel-fullscreen .app-panel turbo-frame[data-panel-pane="documents"]:not(:has(> .documents-panel)) {
      padding: 20px 28px 24px;
    }
    /* From 1100 px the header's icon is the only way in; under it, this one is the link to the document's page. */
    .document-header .document-fullscreen { display: none; }
  }
  @media (max-width: 1099px) {
    .document-fullscreen { width: var(--tap); height: var(--tap); }
  }
}