/* ===========================================================================
   Shared chrome for the demos under /demos/.
   ---------------------------------------------------------------------------
   Each demo carries its own visual identity — they're recreations of real
   client software, and flattening them into one house style would misrepresent
   the work. This file is only the frame around them: a sticky bar that keeps
   the way back to the main site permanently visible, and states plainly that
   what you're looking at is a demo running on invented data.

   Colours are literal rather than var()-based on purpose: each demo defines
   its own token scope, and the frame must not inherit or collide with it.
   =========================================================================== */

.demo-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 18px);
    padding: 10px clamp(14px, 3vw, 28px);
    background: #060B1A;
    border-bottom: 1px solid rgba(138, 179, 255, 0.16);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The primary job of this bar. Styled as a real button rather than a text
   link — someone deep in a demo should never have to hunt for the exit. */
.demo-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 9px;
    background: rgba(138, 179, 255, 0.08);
    border: 1px solid rgba(138, 179, 255, 0.22);
    color: #EEF3FF;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-bar__back:hover {
    background: rgba(138, 179, 255, 0.16);
    border-color: #5792FF;
    transform: translateX(-2px);
}
.demo-bar__back svg { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.demo-bar__back:hover svg { transform: translateX(-3px); }

.demo-bar__logo { width: 26px; height: auto; flex: none; }

.demo-bar__title {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A9B8DC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Standing disclosure that the data is invented. Confidentiality is not a
   footnote — it belongs where it is always visible. */
.demo-bar__tag {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(138, 179, 255, 0.22);
    color: #7C8CB4;
    font-size: 0.76rem;
    white-space: nowrap;
}
.demo-bar__tag i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5792FF;
    font-style: normal;
}

.demo-bar:focus-within .demo-bar__back:focus-visible {
    outline: 2px solid #2A73FF;
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .demo-bar__title { display: none; }
    .demo-bar__tag span { display: none; }
}