@layer components {
  /* The Markdown reader (lib/markdown_reader.js): a centered panel in the app's theme; on a phone, the whole screen. */
  .markdown-reader {
    position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; border: 0; overflow: hidden;
    padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
    overscroll-behavior: contain; background: transparent; color: var(--foreground);
  }
  /* One explicit cell: the toast host the reader receives must not add a row that takes half the height. */
  .markdown-reader[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
  .markdown-reader::backdrop { background: oklch(0 0 0 / 0.45); }
  :root:has(dialog.markdown-reader[open]) { overflow: hidden; }
  .markdown-reader-panel {
    width: min(860px, 100%); height: 100%; min-height: 0;
    position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background);
    box-shadow: 0 16px 40px -12px light-dark(oklch(0 0 0 / 0.25), oklch(0 0 0 / 0.6)), var(--shadow-sm);
  }
  .markdown-reader-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--border);
  }
  .markdown-reader-title {
    flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .markdown-reader-button {
    width: var(--tap); height: var(--tap); flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; cursor: pointer;
  }
  .markdown-reader-button:hover { background: var(--accent); }
  .markdown-reader-button:active { background: var(--border); }
  .markdown-reader-button:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .markdown-reader-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 32px; }
  .markdown-reader-scroll:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
  .markdown-reader-content .document-body { margin-inline: auto; }
  .markdown-reader-notice { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
  .markdown-reader-notice a { color: inherit; text-underline-offset: 2px; }

  /* Phones, also in landscape: the window is the screen, bar and text clear of the notch and the home indicator, the reading size of a document page. */
  @media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .markdown-reader { padding: 0; }
    .markdown-reader-panel { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .markdown-reader-bar { padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) 8px calc(16px + var(--safe-left)); }
    .markdown-reader-scroll {
      padding: 16px calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));
    }
    .markdown-reader-content .document-body { font-size: 1rem; line-height: 1.6; }
    .markdown-reader-content .document-body h2 { font-size: 1.125rem; }
    .markdown-reader-content .document-body h3 { font-size: 1rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .markdown-reader[open] { animation: markdown-reader-in 0.14s ease-out; }
  }
  @keyframes markdown-reader-in { from { opacity: 0; } }
}