/* =============================================================================
   THE DMT TOAST — one card, shared
   =============================================================================
   The plate lab (dmt.php) has the best notification on the estate and it was
   trapped inside a single 355KB page. This is that card, lifted out and put
   somewhere two properties can both link it — RINSE and Clockwork — rather than
   copied into each of their stylesheets to drift apart at leisure.

   WHAT MAKES IT DIFFERENT from the estate's LXToast, which says a title and a
   sentence: this says a KEY and a VALUE. "SECTOR / Utilities 7.0 out of ten" is
   a reading; "Sector read" is an announcement, and an announcement is only
   worth the room it takes if you did not already know. One card per key, so
   pressing the same control twice replaces rather than stacks. Several changes
   from one press fold into ONE card with a line each. And the clock stops while
   the pointer is on the stack or the tab is in the background — a card that
   expires while you are reading it may as well not have been shown.

   IT TAKES ITS COLOURS FROM THE PAGE. Every value here is a token the host
   property already defines, so it arrives in the paper edition or the dark one
   without a second rule and without knowing which it is in.
   ========================================================================== */

#toast-host {
    position: fixed; right: 22px; bottom: 22px; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    pointer-events: none; max-width: min(340px, calc(100vw - 44px));
}
.toast {
    pointer-events: auto;
    background: var(--paper);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(30, 38, 43, .10), 0 2px 6px rgba(30, 38, 43, .06);
    padding: 11px 14px; min-width: 172px; max-width: 100%;
    transform: translateY(6px); opacity: 0;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(-4px); }
/* A card is clickable, so it says so on the pointer. */
.toast { cursor: pointer; }
.toast:hover { border-color: var(--ink-55); }
/* Held — the pointer is on the stack, or the tab is in the background.
   The clocks have stopped, and the stack lifts a little to say so
   rather than announcing it in words nobody asked for. */
#toast-host.is-held .toast {
    box-shadow: 0 12px 34px rgba(30, 38, 43, .15), 0 3px 8px rgba(30, 38, 43, .08);
}
.toast__k {
    display: flex; align-items: center; gap: .5rem;
    font-size: .55rem; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-55);
}
.toast__k::before {
    content: ''; width: 12px; height: 1px; background: var(--accent); flex: 0 0 auto;
}
.toast__v {
    margin-top: .3rem; font-size: .84rem; font-weight: 500;
    letter-spacing: -.015em; color: var(--ink); line-height: 1.35;
}
.toast__v em {
    font-style: normal; font-family: var(--mono); font-size: .78rem;
    font-variant-numeric: tabular-nums; color: var(--ink-55);
}
/* Recording is the one state worth flagging in colour — it is running
   whether or not the tab is being watched. */
.toast.is-live { border-color: var(--accent); }
.toast.is-live .toast__k { color: var(--accent); }

/* The grouped card. One press that changes four things is one card with
   four lines, not four cards — a list reads in a single glance and
   occupies about a third of the room the stack did. */
.toast__list { margin: .35rem 0 0; padding: 0; list-style: none; }
.toast__list li {
    display: grid; grid-template-columns: 72px 1fr; gap: .55rem;
    align-items: baseline; padding: 2px 0;
}
.toast__list li + li { border-top: 1px solid var(--line-soft); }
.toast__list b {
    font-size: .5rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-40, var(--muted));
}
.toast__list span {
    font-size: .76rem; font-weight: 500; color: var(--ink);
    line-height: 1.3; letter-spacing: -.01em;
}
.toast__list em {
    font-style: normal; font-family: var(--mono); font-size: .7rem;
    font-variant-numeric: tabular-nums; color: var(--ink-55);
}
.toast--group .toast__v { margin-top: 0; }