/* A read-only illustration using the actual workspace shell and calendar CSS. */
html, body { margin: 0; overflow: hidden; }
body.studio-shell.is-demo-studio { padding: 0; }
.nx-sheet { inline-size: 100%; block-size: 100dvh; margin: 0; box-shadow: none; }
.nx-sheet-layout > .nx-rail.is-expanded { box-shadow: none; }
.studio-workspace .studio-body { grid-template-columns: minmax(0,1fr) 260px; }
.studio-workspace .schedule-pane { padding-inline-start: 20px; padding-inline-end: 20px; overflow: hidden; }
.nx-rail.is-pinned .rail-toggle .rail-pin, .nx-rail.is-pinned .rail-sub { display: none; }
.rail-link[aria-label="Timetables"] { color: var(--rose-deep); background: var(--rose-wash); }
.request-heading { padding-block-end: 16px; }
.request-heading h2 { margin-block-start: 0; }
.request-item { width: 100%; box-sizing: border-box; }
.request-pane { overflow: hidden; }

/* Phone width. The homepage loads this page at 390px on a phone, and it shows
   what the studio shows there: the menu closed behind its button and the
   timetable across the full width. The rail is forced open above for the
   desktop illustration, so it is closed again here. The requests column sits
   under the timetable on a phone, below the part the homepage shows. */
@media (max-width: 600px) {
  .nx-sheet-layout > .nx-rail.is-expanded { inline-size: 0; visibility: hidden; box-shadow: none; }
  .request-pane { display: none; }
  .studio-workspace .schedule-pane { padding-inline: 12px; }
}