/* Signals: plates at the top-right edge, newest in front, older receding */
#ossignals { position: fixed; top: 72px; right: 24px; z-index: 58; display: grid; gap: 10px; width: min(92vw, 380px); pointer-events: none; }
#ossignals .sig { position: relative; pointer-events: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px 12px 12px; background: rgba(14, 15, 18, .94); border: 1px solid rgba(255, 250, 248, .16); color: var(--bone); opacity: 0; transform: translateX(6px); transition: opacity .32s ease, transform .5s cubic-bezier(.16, 1, .3, 1), filter .4s ease; outline: none; }
#ossignals .sig.on { opacity: 1; transform: none; }
#ossignals .sig.off { opacity: 0; transform: translateX(10px); }
#ossignals .sig[data-depth="1"] { opacity: .62; transform: scale(.975); filter: brightness(.85); }
#ossignals .sig[data-depth="2"] { opacity: .38; transform: scale(.95); filter: brightness(.7); }
#ossignals .sig-rule { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--bone); transform: scaleX(0); transform-origin: right; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
#ossignals .sig.on .sig-rule { transform: scaleX(1); }
#ossignals .sig-av { position: relative; width: 44px; height: 44px; overflow: hidden; border: 1px solid rgba(255, 250, 248, .22); background: #15161a; image-rendering: pixelated; }
#ossignals .sig-av b { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Doto', var(--mono); font-weight: 800; font-size: 22px; color: var(--bone-70); }
#ossignals .sig-slice { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; }
#ossignals .sig-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 250, 248, .85); box-shadow: 0 0 10px rgba(255, 250, 248, .7); opacity: 0; }
#ossignals .sig.on .sig-scan { animation: sig-scan .6s cubic-bezier(.2, .9, .2, 1) .1s both; }
@keyframes sig-scan { from { transform: translateY(0); opacity: .9; } to { transform: translateY(44px); opacity: 0; } }
#ossignals .sig-body { display: grid; gap: 7px; min-width: 0; }
#ossignals .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 9px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#ossignals .eyebrow .dot { width: 5px; height: 5px; background: var(--bone-45); }
#ossignals .eyebrow .dot.g { background: #2BB673; box-shadow: 0 0 8px rgba(43, 182, 115, .7); animation: sig-blink 1.2s steps(1) infinite; }
#ossignals .eyebrow .dot.r { background: #F04E4E; box-shadow: 0 0 8px rgba(240, 78, 78, .6); }
@keyframes sig-blink { 50% { opacity: .35; } }
#ossignals .sig-line { margin: 0; min-height: 1.2em; font-family: 'Doto', var(--mono); font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--bone); overflow-wrap: anywhere; }
#ossignals .sig-caret { display: inline-block; width: .5em; height: .85em; margin-left: .1em; vertical-align: -.08em; background: var(--bone); box-shadow: 0 0 10px rgba(255, 250, 248, .5); animation: sig-blink .8s steps(1) infinite; }
#ossignals .sig-ro { margin: 0; font: 500 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#ossignals .sig-ro .to { font-family: 'Doto', var(--mono); font-weight: 800; font-size: 14px; color: var(--bone); letter-spacing: .04em; }
#ossignals .sig-ring { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#ossignals .sig-ring i { width: 6px; height: 6px; background: rgba(255, 250, 248, .28); transition: background .3s, box-shadow .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
#ossignals .sig-ring i.new { background: rgba(255, 250, 248, .12); border: 1px solid rgba(43, 182, 115, .5); box-sizing: border-box; }
#ossignals .sig-ring i.new.lit { background: #2BB673; border-color: #2BB673; box-shadow: 0 0 10px rgba(43, 182, 115, .8); transform: scale(1.35); }
#ossignals .sig-ring b { font: 500 9px/1 var(--mono); color: var(--bone-45); margin-left: 4px; }
#ossignals .sig-keys { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; opacity: 0; transform: translateY(4px); transition: opacity .3s ease .1s, transform .4s cubic-bezier(.16, 1, .3, 1) .1s; }
#ossignals .sig.spoken .sig-keys, #ossignals .sig:hover .sig-keys, #ossignals .sig:focus-within .sig-keys { opacity: 1; transform: none; }
#ossignals .sig-keys button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); border-radius: 3px; }
#ossignals .sig-keys button:hover, #ossignals .sig-keys button:focus-visible { color: var(--bone); background: rgba(255, 250, 248, .07); }
#ossignals .sig-keys button:disabled { opacity: .5; cursor: default; }
#ossignals .sig-keys kbd { font: 500 9px/1 var(--mono); padding: 3px 4px; border: 1px solid rgba(255, 250, 248, .25); border-radius: 3px; color: var(--bone-45); }
#ossignals .sig-px { position: absolute; width: 3px; height: 3px; background: #FFFAF8; box-shadow: 0 0 6px rgba(255, 250, 248, .9); opacity: 0; animation: sig-px .9s cubic-bezier(.2, .9, .2, 1) forwards; pointer-events: none; }
@keyframes sig-px { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -20px)) scale(.5); } }
#ossignals { transition: opacity 1.2s ease; }
body.chart-open #ossignals, body.immersive #ossignals { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #ossignals .sig, #ossignals .sig-rule, #ossignals .sig-ring i, #ossignals .sig-keys { transition: none; } #ossignals .sig-scan, #ossignals .eyebrow .dot.g, #ossignals .sig-caret { animation: none; } }
@media (max-width: 700px) { #ossignals { top: 64px; right: 12px; left: 12px; width: auto; } }
#ossignals .sig-av.kagi { border-color: rgba(255, 250, 248, .3); background: #FFFAF8; display: grid; place-items: center; image-rendering: auto; }
#ossignals .sig-av.kagi .kagi { width: 40px; height: 40px; }