/* One app chart alone (S112b, website\demo\embed.js builds the rules that hide everything but the chart): on the app's
   own page background with a little of its spacing, so it reads as a piece cut from the app's window. Nothing shows
   until the chart has drawn, and then it fades in. */
html.embed, html.embed body { height: auto !important; min-height: var(--peak, 0px) !important; overflow: hidden !important; }
html[data-show="builder"] body { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
html.embed body { opacity: 0; margin: 0 !important; padding: 16px !important; transition: opacity .35s ease, transform .7s cubic-bezier(.3, .1, .2, 1); transform-origin: 0 0; }
html.embed[data-embed-ready] body { opacity: 1; }
html.embed[data-embed-ready].fading body { opacity: 0; transition-duration: .3s; }
html.embed * { cursor: pointer !important; }
/* zoomed back (embed.js zoom): the app laid out at a wider width, scaled down to the frame */
html.zoomed body { width: var(--zv) !important; transform: scale(var(--zk)); }
@media (prefers-reduced-motion: reduce) { html.embed body { transition: none; } }

/* S150, the home page's tours (the app's own page on white, in the site's white card) */
html.embed.live body, html.embed.live { background: #fff; }
html.embed.live .card, html.embed.live .sl-list, html.embed.live .my-panel, html.embed.live .my-door { background: #fff !important; }
.tour-ring { outline: 3px solid rgba(21, 113, 181, .42) !important; outline-offset: 2px; border-radius: 6px; }
.tour-ring[data-ring="wide"] { outline-offset: 8px; border-radius: 12px; }

/* What slipped: the To do lists, one at a time. Overview: every list's title, count and dollars. Solo: one list with its
   buttons and rows; the long explanations stay in the app. */
html[data-show="todo"] .sl-why, html[data-show="todo"] .sl-howrow, html[data-show="todo"] .sl-past, html[data-show="todo"] .sl-lfoot > :not(.sl-added),
html[data-show="todo"] .sl-rule, html[data-show="todo"] .sl-empty { display: none !important; }
html[data-show="todo"] .sl-list { min-height: 0 !important; height: auto !important; }
html[data-show="todo"] .sl-list tbody tr.row:nth-child(n+13), html[data-show="todo"] .sl-added tbody tr.row:nth-child(n+8) { display: none !important; }
html[data-show="todo"]:not(.solo) .sl-tools, html[data-show="todo"]:not(.solo) .sl-scroll { display: none !important; }
html[data-show="todo"]:not(.solo) .sl-list { margin-bottom: 4px !important; padding-bottom: 0 !important; }
html[data-show="todo"].solo .sl-h2, html[data-show="todo"].solo .sl-list:not(.tour-on),
html[data-show="todo"].solo .section:not(:has(.tour-on)) { display: none !important; }

/* Productivity (S150, Oct 22): the provider table alone, zoomed to fit (embed.js fit); the month chart is gone */

/* Several practices: the practice name above the Brief's Money row, as a small button */
html[data-show="practices"] #practice { display: inline-flex !important; width: auto !important; margin: 0 0 12px !important; padding: 5px 8px !important; }

/* Don't see a chart? Make it: the idea fills in a step at a time (the app draws them all at once; the steps appear in turn) */
html[data-show="builder"] .my-step:nth-child(n+3), html[data-show="builder"] .my-actions { display: none !important; }
html[data-show="builder"][data-bstep="1"] .my-step:nth-child(n+2), html[data-show="builder"][data-bstep="1"] .my-preview,
html[data-show="builder"][data-bstep="2"] .my-preview { opacity: 0; }
html[data-show="builder"] .my-step, html[data-show="builder"] .my-preview { transition: opacity .4s; }