/* What static/js/wire.js adds to a wire panel, and nothing else.
 *
 * The panel itself — items, chips, link cards, moves — is styled in custom.css
 * because it is server-rendered and has to look right with JS off. Everything
 * here exists only once something is polling: the status line, its Retry
 * button, and the marker left where a burst may have lost rows. Loaded beside
 * wire.js by templates/news/_wire_assets.html, so the two cannot be separated.
 */

/* The state of the feed itself, directly above the list. Quiet while live —
   one muted line saying when it last refreshed — and only raised when that
   time has stopped moving. */
.eg-wire-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    margin: 0 0 .45rem;
    font-size: 12px;            /* was .7rem = 11.2px (PLAN section 3) */
    line-height: 1.35;
    color: var(--eg-muted);
}
/* The role=status sentence is empty until the first transition; an empty flex
   item would still take a gap's worth of space. */
.eg-wire-status-msg:empty { display: none; }
.eg-wire-status.is-stale .eg-wire-status-msg,
.eg-wire-status.is-offline .eg-wire-status-msg,
.eg-wire-status.is-gap .eg-wire-status-msg {
    color: var(--eg-wait);
    font-weight: 600;
}
.eg-wire-status-at time { font-variant-numeric: tabular-nums; }

.eg-wire-retry,
.eg-wire-reload {
    font-size: 12px;            /* was .7rem; a control, not a caption */
    padding: .1rem .5rem;
}

/* The server-rendered badge, rewritten by wire.js. Green says "live" and must
   not be the colour of a feed that has stopped. */
.eg-wire-live.is-stale,
.eg-wire-live.is-offline,
.eg-wire-live.is-gap { color: var(--eg-wait); }

/* Between a burst that filled a whole poll and what was on the page before it:
   rows from inside that burst may not have arrived, and saying so is the
   difference between a gap and a feed that looks complete. */
.eg-wire-gap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .6rem;
    padding: .4rem .7rem;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--eg-wait);
    background: #fffbe6;
    border-bottom: 1px solid var(--eg-line);
}