/* The website's additions to preview.css for the live demo, loaded after it (the Windows app's HOST_CSS,
   desktop/src/preview-host/index.ts, does the same for Chromium). */

/* render.js keeps the reading position itself; Chromium's scroll anchoring would move the page first. */
html, body { overflow-anchor: none; }

/* System fonts on every platform, as in the apps. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Helvetica Neue", sans-serif; }
.preview code { font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace; }

/* preview.css gives the one sheet its dark colours under data-theme="dark", which host.js sets. Without
   script (the static sheet) the system's theme decides, with the same colours. */
@media (prefers-color-scheme: dark) {
  :root.md-app:not([data-theme]) {
    --page:#17191c; --backdrop:#0f1113; --sheet-line:rgba(255,255,255,.08);
    --sheet-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

/* The scroll bars in the brand colours, as on the home page and in its source pane (site.css): a green thumb
   on a clear track, in the frame's theme. Wide tables and code boxes scroll with the same bars. */
:root { --sb-thumb: rgba(31, 157, 89, .5); --sb-hover: #34C06F; --sb-active: #1F9D59; }
:root[data-theme="dark"] { --sb-thumb: rgba(70, 211, 132, .42); --sb-hover: #46D384; --sb-active: #5FD998; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --sb-thumb: rgba(70, 211, 132, .42); --sb-hover: #46D384; --sb-active: #5FD998; }
}
/* Chromium and Firefox. */
html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
html:hover { scrollbar-color: var(--sb-hover) transparent; }
/* WebKit (Safari) would draw its own grey overlay bars for scrollbar-color and ignore the pseudo-elements below:
   switched off there, as in site.css. `font: -apple-system-body` is a WebKit feature. */
@supports (font: -apple-system-body) {
  html, html:hover { scrollbar-color: auto; scrollbar-width: auto; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { min-height: 36px; border: 3px solid transparent; border-radius: 999px; background: var(--sb-thumb) padding-box; }
::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: var(--sb-hover); }
::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: var(--sb-active); }