/* The live demo: the real report full size, in a browser window or in Memoir for Windows' own window, with Today
   from the toolbar's clock or the tray's */
.demo-page .mark { position: fixed; top: 19px; left: var(--gutter); }
.dm { padding: 92px var(--gutter) 40px; max-width: 1560px; margin: 0 auto; }
.dm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; margin-bottom: 22px; }
.dm-h { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.dm-h .soft { color: var(--ink-4); }
.dm-sub { margin: 8px 0 0; font-size: 15px; color: var(--ink-3); }
.dm-tools { display: flex; align-items: center; gap: 10px; }
.dm-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); isolation: isolate; }
.dm-seg button { position: relative; white-space: nowrap; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.25s var(--ease); }
.dm-seg button[aria-pressed="true"] { color: #000; }
.dm-seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.dm-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1; border-radius: 999px; background: var(--ink); transition: transform 0.45s var(--pop), width 0.45s var(--pop); }
.dm-tour { white-space: nowrap; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.25s var(--ease-out); }
.dm-tour:hover { background: rgba(255, 255, 255, 0.12); }
.dm-tour:active { transform: scale(0.96); }
.dm-tour:focus-visible { outline: none; box-shadow: var(--ring); }

.dm-stage { position: relative; }
.dm-win .bw-fav { background: url("../img/icon32.png") center / cover; border-radius: 50%; }
.dm-win .bw-tool { justify-content: flex-end; }
.dm-icon { border: 0; background: transparent; cursor: pointer; transition: background-color 0.2s var(--ease); }
.dm-icon:hover, .dm-icon[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
.dm-icon:focus-visible { outline: none; box-shadow: var(--ring); }
.dm-page { height: clamp(560px, calc(100svh - 270px), 1000px); }
.dm-page iframe, .dm-wwin iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; color-scheme: dark; }

.dm-desk { display: flex; flex-direction: column; height: clamp(600px, calc(100svh - 200px), 1060px); border-radius: 22px; background: linear-gradient(160deg, #101014, #08080a 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: clip; }
.dm-wwin { flex: 1; margin: 18px 18px 14px; border-radius: 10px; }
.dm-bar { display: flex; justify-content: flex-end; background: rgba(32, 32, 34, 0.96); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06); }
.dm-bar .tb { background: transparent; box-shadow: none; }
.dm-bar .tb-tray { border: 0; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.2s var(--ease); }
.dm-bar .tb-tray:hover { background: rgba(255, 255, 255, 0.07); }

/* Today: the popup under the toolbar's clock, or the flyout above the taskbar */
.dm-pop { position: absolute; z-index: 5; width: 380px; height: 600px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.7); overflow: clip; transform-origin: 92% 0; }
.dm-pop.flyout { border-radius: 9px; transform-origin: 50% 100%; }
.dm-pop iframe { width: 100%; height: 100%; border: 0; background: #000; }
.dm-foot { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 720px) {
  .dm { padding-top: 84px; }
  .dm-tools { width: 100%; }
  .dm-seg { flex: 1; }
  .dm-seg button { flex: 1; padding: 0 10px; font-size: 13px; }
  .dm-tour { padding: 0 14px; font-size: 13px; }
  .dm-page { height: calc(100svh - 230px); }
  .dm-pop { right: 8px !important; left: auto !important; width: min(380px, calc(100vw - 2 * var(--gutter) - 16px)); height: min(600px, calc(100svh - 240px)); }
}