/* Live-demo polish — 2026-08-14, revision b (supersedes
   demo-polish-20260814.css, which stays on disk: build assets are served
   immutable for a year here).

   Adds the centring the dashboard needs now that it sits inside a normal
   centred section on the Features page instead of its own left-aligned page
   header. Everything stays scoped to .demo-* / .track-seg*, so linking this
   globally cannot affect another page.

   1) The demo shell is a real PDM window: the title bar spans both columns of
      the shell's grid and reuses the site's own .app-window-bar language.
   2) Multi-part downloads render one cell per connection inside the track.
      The 2px gaps let the row background through — that is what reads as the
      segment dividers. */

.demo-window-bar {
    grid-column: 1 / -1;
    background: var(--bg2);
}

.demo-window-title {
    direction: ltr;
}

/* Stats sit under the centred section head when the dashboard is embedded. */
.demo-stats-center {
    justify-content: center;
    margin: -18px 0 24px;
}

/* Segmented progress ------------------------------------------------------ */

.track-segmented {
    display: flex;
    gap: 2px;
    background: transparent;
}

.track-seg {
    position: relative;
    flex: 1;
    height: 100%;
    min-width: 0;
    border-radius: 4px;
    background: var(--track);
    overflow: hidden;
}

.track-seg-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width .55s linear;
}

.track-segmented.is-done .track-seg-fill {
    background: var(--accent2);
}

.track-segmented.is-paused .track-seg-fill {
    background: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .track-seg-fill {
        transition: none;
    }
}