/* Pop-up messages ("feed") over the picture and the journal highlight, shared by the ONS simulators.
   Source of truth: /Volumes/CodeFactory/ons-sim-core (edit there, then tools/sync.sh). Needs the app tokens:
   --accent. Markup: <div class="toast-anchor" id="toastAnchor"><div id="toasts"><div class="feed" id="feed"></div></div></div>,
   placed in #scene right under the figure; js/feed.js fills it. */

/* the messages hang under the figure (zero-height anchor: nothing shifts) and dock to the bottom edge only when there is no room */
#toasts { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100vw - 20px)); z-index: 28; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast-anchor { position: relative; height: 0; width: 100%; z-index: 28; }
#scene .toast-anchor #toasts { position: absolute; left: 50%; right: auto; top: 6px; bottom: auto; transform: translateX(-50%); width: min(760px, 100%); }
#scene .toast-anchor #toasts.dock { position: fixed; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(760px, calc(100vw - 20px)); }

/* at most three cards: the newest on top, the older ones sink and fade */
#toasts .feed { width: 100%; min-height: 0; max-height: 42vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; flex: none; }
#toasts .feed-item { border-radius: 7px; padding: 3px 9px; font-size: 13.5px; line-height: 1.35; background: #f4f1e8; color: #16191d; border: 1px solid #fff; border-left: 5px solid var(--accent); font-weight: 500; box-shadow: 0 6px 18px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.45); pointer-events: auto; cursor: pointer; }
#toasts .feed-item .t { color: #5b6168; margin-right: 6px; font-variant-numeric: tabular-nums; font-size: 12px; }
#toasts .feed-item.find { background: #fff1c4; border-left-color: #d79a00; }
#toasts .feed-item.warn { background: #ffe1de; border-left-color: #d9413d; color: #4a0f0c; }
#toasts .feed-item.ok { background: #dcf3e3; border-left-color: #2e9b57; }
#toasts .feed-item.sys { background: #e4e7ea; color: #3b4148; border-left-color: #8a9199; }
#toasts .feed-item.death { background: #d9413d; color: #fff; border-left-color: #7d1512; }
#toasts .feed-item.death .t { color: #ffd9d6; }
#toasts .feed-item.new { animation: toastIn .28s ease-out; }
#toasts .feed-item.leaving { animation: toastOut .45s ease-in forwards; }
#toasts .feed-item:nth-child(2) { opacity: .82; transform: scale(.985); }
#toasts .feed-item:nth-child(3) { opacity: .62; transform: scale(.97); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(28px); } }

/* a line that has just dropped into the journal */
.log .arrived { background: rgba(224,165,38,.16); border-radius: 4px; }

@media (max-width: 900px) {
  #toasts { bottom: calc(6px + env(safe-area-inset-bottom)); }
  #toasts .feed { max-height: 30vh; }
  #toasts .feed-item { font-size: 13px; padding: 4px 8px; }
}