/* /prompts: the design-system Page head and Prompt list (/design-components.css)
   in one 640px column. This file only lays the page out. */
html, body.prompts-page {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  display: block;
  background: var(--color-background, #fffdf7);
}

/* One 640px column, clear of the fixed 44px "Show sidebar" button. */
.prompts {
  box-sizing: border-box;
  max-width: calc(640px + 2 * max(20px, env(safe-area-inset-left, 0px)));
  margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 80px max(20px, env(safe-area-inset-left, 0px));
  color: var(--color-foreground, #2d2a26);
  font-family: var(--font-sans);
}
.prompts > .tk-status { margin-top: 16px; }
/* FilterBar and Summary sit between the eyebrow and the list. */
.prompts > [data-prompts-filters] { margin-top: 16px; }
.prompts > [data-prompts-summary] { margin-top: 20px; }
.prompts > [data-prompts-filters]:not([hidden]) ~ [data-prompts-list] { margin-top: 36px; }
.prompts-page [hidden] { display: none !important; }

/* Keep the page width fixed (same fix as lessons/lesson.css). styles.css
 * hides scroll bars (0px) until the cursor is over them, then shows a 6px
 * one; on the page scroll bar that narrowed the column every time the
 * cursor entered the window, so the page jittered. Always reserve a 6px
 * track; the thumb still only shows on hover. Chromium styles the page
 * scroll bar from body (checked with scroll bars on: 1274px wide before
 * and after the cursor moves in). */
body.prompts-page::-webkit-scrollbar,
body.prompts-page:hover::-webkit-scrollbar { width: 6px; }