/* ─────────────────────────────────────────────────────────────────────────
   Veskslop style overrides — Nocturne fidelity pass.

   Small corrections to style.css. Load LAST, after style.css and media.css.
   Fold into style.css when convenient; kept separate here so nothing you
   edited gets clobbered.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Weight ────────────────────────────────────────────────────────────
   Nocturne: headings never go past 500; hierarchy is size and space.
   "Speaking" was font-weight 700, which also reflows the row as it toggles.
   Carry it in color instead — the level meter beside it is the loud signal. */

.vk-person-name.speaking,
.vk-voice-member .speaking,
.vk-right-name .speaking,
.vk-right-name .vk-name.speaking {
    font-weight: 500;
    color: var(--color-accent-200);
}

/* ── 2. Focus ─────────────────────────────────────────────────────────────
   nocturne.css gives :focus-visible a 2px accent ring, but every control
   built from a bare <button> that resets background and border loses the
   ring's contrast against its own surface. Pin it back on explicitly. */

.vk-rail-row:focus-visible,
.vk-rail-voice-head:focus-visible,
.vk-menu-item:focus-visible,
.vk-guild-mark:focus-visible,
.vk-scope-btn:focus-visible,
.vk-console-tab:focus-visible,
.vk-console-button:focus-visible,
.vk-chip:focus-visible,
.vk-star:focus-visible,
.vk-tab:focus-visible,
.vk-settings-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Inset the ring where the control sits flush in a scroller, so it is not
   clipped by the overflow edge. */
.vk-rail-row:focus-visible,
.vk-menu-item:focus-visible {
    outline-offset: -2px;
}

/* ── 3. Presence ──────────────────────────────────────────────────────────
   idle and dnd both landed on neutral-200, so they were indistinguishable.
   idle drops a step; dnd keeps the bright dot and adds the bar that makes
   it readable without color. */

.vk-presence.idle {
    background: var(--color-neutral-400);
}

.vk-presence.dnd {
    display: grid;
    place-items: center;
    background: var(--color-neutral-200);
}

.vk-presence.dnd::after {
    content: "";
    width: 4px;
    height: 1.5px;
    background: var(--color-surface);
}

/* ── 4. Rules ─────────────────────────────────────────────────────────────
   Nocturne rules fade to transparent over 48px a side. The channel header
   does this; the settings panel's dozens of flat rules do not, which is
   what makes that panel read as a different product. */

.vk-settings-head,
.vk-status-row {
    box-shadow: none;
    background: linear-gradient(
            to right,
            transparent,
            var(--color-neutral-900) 24px,
            var(--color-neutral-900) calc(100% - 24px),
            transparent
        )
        no-repeat bottom / 100% 1px;
}

.vk-settings-head {
    background: linear-gradient(
            to right,
            transparent,
            var(--color-neutral-800) 24px,
            var(--color-neutral-800) calc(100% - 24px),
            transparent
        )
        no-repeat bottom / 100% 1px;
}

.vk-status-row:last-child {
    background: none;
}

/* ── 5. Toasts ────────────────────────────────────────────────────────────
   The error toast was a neutral-200 stripe — the same mark the ok toast
   used, one hue apart. Now they are genuinely different roles. */

.vk-toast.error {
    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-danger-400);
}

.vk-toast.warn {
    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-warn-400);
}

.vk-toast.ok {
    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-ok-400);
}

/* ── 6. Offline ───────────────────────────────────────────────────────────
   opacity .5 + saturate .6 pushes every label under 3:1 — the one state
   where you most need to read what is on screen. Dim the chrome, not the
   type, and say why. */

.vk-offline .vk-body,
.vk-offline .vk-console {
    opacity: 1;
    filter: none;
    pointer-events: none;
}

.vk-offline .vk-body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

.vk-offline .vk-body {
    position: relative;
}

.vk-offline .vk-composer,
.vk-offline .vk-rail,
.vk-offline .vk-right {
    opacity: 0.72;
}

/* ── 7. The bridge dot ────────────────────────────────────────────────────
   .error was neutral-200 — a white dot reads as "on". */

.vk-dot.error {
    background: var(--color-danger-400);
}

.vk-dot.warn {
    background: var(--color-warn-400);
}

/* ── 8. QR ────────────────────────────────────────────────────────────────
   Pure white is correct here (scanner contrast), but give it the system's
   edge so it is not a bare rectangle floating on the panel. */

.vk-qr {
    box-shadow: var(--shadow-sm);
}