/* ==========================================================================
   Header — what is connected, and how much is going on
   ========================================================================== */
.top {
    flex: 0 0 auto;
    height: var(--head-h);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(14, 14, 17, 0.86);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    position: relative;
    z-index: 20;
}
.brand {
    display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    /* Pressable, and it has to look it — the padding is what gives the hover something to fill,
       and the negative margin keeps the wordmark where it has always been on the left edge. */
    padding: 5px 8px; margin-left: -8px; border-radius: 9px;
}
.brand:hover { background: var(--card-hi); }
.brand:active { background: var(--line); }
.brand canvas { display: block; image-rendering: pixelated; }
.brand b { font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; }

/* The counts are the header's whole job on a busy machine: how many are running, how many
   have stopped and want you. The waiting half is the only coloured text up here. */
.counts {
    flex: 1 1 auto; min-width: 0;
    color: var(--dim); font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.counts .part + .part::before { content: "·"; color: #3a3a44; padding: 0 6px; }
.counts .waiting { color: var(--accent); font-weight: 600; }
.counts .quiet { color: var(--faint); }

.conn {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--dim);
    font-size: 11.5px;
    white-space: nowrap;
}
.conn:hover { background: var(--card-hi); }
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.conn[data-state="live"] .dot { background: var(--ok); }
.conn[data-state="connecting"] .dot { background: var(--warn); animation: breathe 1.4s var(--ease) infinite; }
.conn[data-state="retrying"] .dot { background: var(--warn); }
.conn[data-state="offline"] .dot { background: var(--bad); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* The page is older than the app that served it. One line, under the header, out of the way of
   everything — it is news, not a fault, and the only thing it is allowed to cost is a row. */
.stale {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    color: var(--dim);
    font-size: 11.5px;
}
.stale[hidden] { display: none; }
.stale span { min-width: 0; overflow-wrap: anywhere; }
.stale .go {
    margin-left: auto; flex: 0 0 auto;
    border: 1px solid var(--accent-ed); border-radius: 999px;
    background: transparent; color: var(--accent);
    font-size: 11.5px; padding: 3px 11px;
}
.stale .go:hover { background: rgba(224, 139, 110, 0.12); }
.stale .shut {
    margin-left: 2px; padding: 0 6px;
    border: 0; background: none; color: inherit;
    opacity: 0.55; font-size: 15px; line-height: 1; cursor: pointer;
}
.stale .shut:hover { opacity: 1; }

/* The gap between a tab being opened on the Mac and the session turning up in the list.
   This line survives even though the list now also carries the project-shaped placeholder:
   somebody may have walked into another transcript after pressing Start, and the news that the
   tab exists still has to remain visible there. The placeholder answers a different question —
   where the new row will land — and disappears when this gives up after fifteen seconds. */
.starting {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    color: var(--dim);
    font-size: 11.5px;
}
.starting[hidden] { display: none; }
.starting span { min-width: 0; overflow-wrap: anywhere; }
.starting canvas { flex: 0 0 auto; display: block; }
/* Given up on: nothing is coming that this page can see, so nothing spins. The sentence is
   the whole of it, and it points at the machine where the answer is. */
.starting[data-state="slow"] canvas { display: none; }
.starting[data-state="slow"] { color: var(--ink); }
.starting .x {
    margin-left: auto; flex: 0 0 auto;
    color: var(--faint); font-size: 15px; line-height: 1;
    padding: 3px 8px; border-radius: 7px;
}
.starting .x:hover { background: var(--card-hi); color: var(--ink); }