/* The public demo (php/utils/demo.php): the header banner and the persona pick. Loaded only when DEMO_MODE is on. */

/* ── Banner: between the claim and the profile menu (DamagePort header, X-Port top bar) ── */
.demo-banner { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; align-self: center; position: relative; }
.site-header:has(.demo-banner) .site-claim { flex: 0 0 auto; max-width: 22rem; }
.xw-top:has(.demo-banner) .xw-top-fill { flex: 0 0 0; }
.xw-top:has(.demo-banner) .xw-title { flex-shrink: 0; }
.demo-text {
    display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 62rem; gap: 0.05rem;
    padding: 0.35rem 0.85rem; border-radius: var(--net-border-radius-md, 8px);
    border: 1px solid rgba(255, 138, 61, 0.55); background: rgba(255, 120, 40, 0.13); line-height: 1.25;
}
.demo-words { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-chip {
    display: none; align-items: center; gap: 0.3rem; white-space: nowrap; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
    padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 138, 61, 0.6); background: rgba(255, 120, 40, 0.16); color: inherit;
}
/* Narrow: the chip; a tap opens the words under it. */
@media (max-width: 1000px) {
    .demo-chip { display: inline-flex; }
    .demo-text {
        /* fixed to the screen, under the header: centred on the chip it would run past a phone's edge */
        display: none; position: fixed; top: calc(var(--net-header-height) + 6px); left: 50%; transform: translateX(-50%); z-index: calc(var(--net-z-nav) + 2);
        width: min(92vw, 26rem); padding: 0.7rem 0.9rem; gap: 0.35rem;
        background: var(--net-bg-card); color: var(--net-text-primary); box-shadow: var(--net-shadow-lg);
    }
    .demo-banner.is-open .demo-text { display: flex; }
    .demo-words { white-space: normal; }
    .demo-words { font-size: 0.85rem; }
}

/* ── The persona pick (/sign-in in the demo) ── */
.page-sign-in .site-main:has(.demo-pick) { display: block; }
.demo-pick { max-width: 64rem; margin: 0 auto; padding: var(--net-spacing-lg) var(--net-spacing-md) 3rem; }
.demo-pick-head { margin-bottom: var(--net-spacing-lg); }
.demo-pick-brand { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.5rem; }
.demo-pick-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px;
    border: 1px solid rgba(255, 138, 61, 0.6); background: rgba(255, 120, 40, 0.16); }
.demo-pick h1 { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.demo-pick-how { margin: 0 0 0.4rem; line-height: 1.5; }
.demo-pick-note { margin: 0; font-size: 0.85rem; color: var(--net-text-muted); line-height: 1.45; }
.demo-group { margin-top: var(--net-spacing-lg); }
.demo-group h2 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 600; color: var(--net-text-muted); }
.demo-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; }
.demo-person { margin: 0; }
.demo-person-btn {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 0.8rem; width: 100%; height: 100%;
    padding: 0.75rem 0.9rem; text-align: left; white-space: normal; cursor: pointer; font: inherit; color: var(--net-text-primary);
    background: var(--net-bg-card); border: 1px solid var(--net-border); border-radius: var(--net-border-radius-md, 8px);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-person-btn:hover, .demo-person-btn:focus-visible { border-color: rgba(255, 138, 61, 0.8); box-shadow: var(--net-shadow-base); transform: translateY(-1px); }
.demo-person-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--net-bg-accent); }
.demo-person-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* The name line: the name left, "Sign in" / "In use" top-right - the role and what they can do run the full width under it. */
.demo-person-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.demo-person-name { font-weight: 700; min-width: 0; }
.demo-person-role { font-size: 0.82rem; color: var(--net-text-muted); }
.demo-person-can { font-size: 0.82rem; line-height: 1.35; }
.demo-person-go { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; white-space: nowrap; color: var(--net-color-primary); }
.demo-pick-foot { margin-top: 2rem; font-size: 0.8rem; color: var(--net-text-muted); }
@media (max-width: 600px) {
    .demo-person-btn { grid-template-columns: 52px minmax(0, 1fr); }
    .demo-person-photo { width: 52px; height: 52px; }
}

/* A person another visitor is using (one visitor per person): greyed out, not clickable, how long they have been in use. */
.demo-person-busy { display: none; flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; white-space: nowrap; padding: 0.15rem 0.55rem; border-radius: 999px;
    color: var(--net-text-muted); border: 1px solid var(--net-border); background: var(--net-bg-accent); }
.demo-person.is-locked .demo-person-btn { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--net-border); }
.demo-person.is-locked .demo-person-go { display: none; }
.demo-person.is-locked .demo-person-busy { display: inline-block; }