/* visit.html — the mobile "watch the room" page for the Guapa Lobby.
   Mobile-first (it's only linked from the mobile hamburger), but renders fine
   if opened on a desktop directly. Tokens come from styles.css; this file only
   adds page-specific layout. Design guide: flat colors, 1px borders, no
   shadows, no pill shapes, Newsreader italic only, blue = data only. */

.vs-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ---- header ---- */

.vs-header {
    padding: var(--space-lg) 0 var(--space-md);
}

.vs-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 var(--space-sm);
}

.vs-header h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--white);
    margin: 0 0 var(--space-sm);
}

.vs-lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--gray-200);
    margin: 0;
}

/* ---- the live room ---- */

.vs-room {
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    background: var(--gray-900);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.vs-room-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-800);
}

.vs-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--white);
}

/* the live dot — steady, doesn't flinch when idle tabs come and go */
.vs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-600);
    transition: background 0.3s ease;
}
.vs-dot.is-live {
    background: #7ec89b; /* --green: connected + someone active */
}

.vs-status {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-600);
}

/* the drifting-figures stage — small, read-only */
.vs-stage {
    position: relative;
    height: 150px;
    background:
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,0.02) 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,0.02) 23px 24px);
    overflow: hidden;
}

.vs-fig {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    /* left/top are set inline in px; the transition makes movement a glide, not
       a jump — the figures DRIFT toward their last-known position. */
    transition: left 0.9s ease-out, top 0.9s ease-out, opacity 0.4s ease;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: left, top;
}

/* The actual Guapa figure — the same logo-mark silhouette the desktop Lobby
   masks, tinted. Residents are yellow so they pop; everyone else is pink. */
.vs-fig-mark {
    width: 16px;
    height: 19px; /* mark is 108x128, aspect 0.844 */
    background-color: var(--pink);
    -webkit-mask: url(assets/guapa-figure.png) center / contain no-repeat;
    mask: url(assets/guapa-figure.png) center / contain no-repeat;
    transform-origin: bottom center; /* dance pivots at the feet */
}
.vs-fig--resident .vs-fig-mark {
    background-color: var(--yellow);
}

/* Dance holds until the figure moves (JS toggles is-dancing on move). */
.vs-fig-mark.is-dancing {
    animation: vs-dance 1.6s ease-in-out infinite;
}
@keyframes vs-dance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-14deg); }
    75% { transform: translateY(-3px) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
    .vs-fig-mark.is-dancing { animation: none; }
}

.vs-fig-name {
    font-size: 0.6rem;
    color: var(--gray-400);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--gray-600);
    text-align: center;
    padding: var(--space-md);
}

/* on the aux — what each figure is CURRENTLY playing (persists, unlike the feed) */
.vs-aux {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vs-aux:not(:empty) {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--gray-800);
}
.vs-aux:not(:empty)::before {
    content: "On the aux";
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 0.4rem;
}
.vs-aux li {
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--gray-400);
}
.vs-aux li .vs-who { color: var(--white); font-weight: 600; }
.vs-aux li .vs-who--resident { color: var(--yellow); }
.vs-aux-arrow { color: var(--gray-600); font-size: 0.68rem; }

/* the feed — what the room is doing, text-forward */
.vs-feed {
    list-style: none;
    margin: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    max-height: 180px;
    overflow-y: auto;
    border-top: 1px solid var(--gray-800);
}

.vs-feed li {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--gray-400);
    padding: 2px 0;
    animation: vs-feed-in 0.3s ease;
}

.vs-feed li .vs-who {
    color: var(--white);
    font-weight: 600;
}
.vs-feed li .vs-who--resident {
    color: var(--yellow);
}
.vs-feed li .vs-album {
    color: var(--pink);
    font-style: italic;
}

@keyframes vs-feed-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- generic section ---- */

.vs-section {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--gray-800);
}

.vs-section h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 var(--space-sm);
}

.vs-section p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--gray-400);
    margin: 0 0 var(--space-sm);
}

.vs-section strong { color: var(--gray-200); font-weight: 600; }

/* ---- the copy-a-line-to-your-agent box ---- */

.vs-say {
    background: var(--dark);
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    padding: var(--space-md);
    margin-top: var(--space-sm);
}

.vs-say-line {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-200);
    margin: 0 0 var(--space-sm);
}
.vs-say-line em { color: var(--pink); font-style: italic; }

.vs-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--yellow);
    color: var(--black);
    border: none;
    border-radius: 4px;
    padding: 0.7rem 1.1rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.vs-copy:hover { background: var(--yellow-hover); }

/* ---- the 5-minute home setup ---- */

.vs-steps {
    list-style: none;
    counter-reset: vs-step;
    padding: 0;
    margin: var(--space-sm) 0 0;
}

.vs-steps li {
    counter-increment: vs-step;
    position: relative;
    padding: 0 0 var(--space-md) 2.2rem;
    border-left: 1px solid var(--gray-800);
    margin-left: 0.6rem;
}
.vs-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.vs-steps li::before {
    content: counter(vs-step);
    position: absolute;
    left: -0.7rem;
    top: -0.15rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-800);
    color: var(--yellow);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.vs-steps h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 0.2rem;
}
.vs-steps p { font-size: 0.85rem; margin: 0; }

.vs-steps code, .vs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--pink);
}

.vs-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.vs-btn {
    display: inline-block;
    padding: 0.9rem 1.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.vs-btn--outline {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--pink-muted);
}
.vs-btn--outline:hover { border-color: var(--pink); color: var(--pink); }

.vs-footnote {
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: var(--space-lg) 0 var(--space-xl);
}