/* 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; }

/* The homepage frame is narrower than a desktop, so the inbox there keeps to the list and the
   thread: the contact card goes, and a row says who, how long and what they said, without where
   they are or who has it. The band pieces are cut from these pages and keep everything. */
body:not(.frag-page) .inbox-main .rail { display: none; }
@media (min-width: 1280px) { body:not(.frag-page) .inbox-main .conv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "thread"; } }
body:not(.frag-page) .inbox-main .conversation-line-meta { display: none; }