/* Demo-only styles, linked after the app's own stylesheet by script/home_demo.rb. */

/* In the light theme the app keeps its own paper, which stands off the homepage's white. The dark
   homepage is the app's dark paper, so there the app steps up to the surface to read as its own
   window, and the sidebar's current page, a surface tile, takes the wash so it stays visible. */
:root[data-theme="dark"] { --paper: var(--surface); }
:root[data-theme="dark"] .nav a[aria-current="page"] { background: var(--wash); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: var(--surface); }
  :root:not([data-theme="light"]) .nav a[aria-current="page"] { background: var(--wash); box-shadow: none; }
}

/* A fragment page: one piece of a dashboard page, shown beside a homepage band. It is a picture of
   the product, so nothing in it takes the pointer. */
.frag-page { overflow: hidden; pointer-events: none; }
.frag { padding: var(--s4) var(--s5); }
.frag > * { margin: 0; }