/* SOST Universe — Phase 3 shared prototype components (on top of ../universe.css tokens).
   No new colours: every value is a token from universe.css (sources cited there). */
.u-nav .menu-btn{display:none}
@media (max-width:820px){
  .u-nav .menu-btn{display:inline-flex;margin-left:8px}
  .u-nav .tools{margin-left:auto}
  .u-nav{gap:10px}
  .u-nav.open ul{display:flex;flex-direction:column;position:absolute;top:100%;left:12px;right:12px;margin:0;padding:8px;background:#050505f2;border:1px solid var(--line-2);border-radius:var(--r-2)}
  .u-nav.open ul a{padding:12px 14px;font-size:16px}
}
/* provenance labels: text always present, colour is a second channel only */
.pv{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:999px;font:600 10.5px/1.6 var(--f-mono);letter-spacing:.05em;border:1px solid currentColor;white-space:nowrap;vertical-align:middle}
.pv:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pv.verified{color:var(--green)} .pv.verified:before{border-radius:1px}
.pv.observed{color:var(--st-window)}
.pv.estimated{color:var(--st-warn)} .pv.estimated:before{background:none;border:1px solid currentColor}
.pv.historical{color:var(--st-hist)} .pv.historical:before{border-radius:0;height:2px}
.pv.simulated{color:var(--st-sim)} .pv.simulated:before{transform:rotate(45deg);border-radius:0}
.pv.projected{color:var(--violet-cr)} .pv.projected:before{background:none;border:1px dashed currentColor}
.pv.unavailable{color:var(--tx-3)} .pv.unavailable:before{background:none;border:1px solid currentColor}
/* connection status */
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font:700 11px var(--f-mono);letter-spacing:.08em;border:1px solid currentColor}
.st.live{color:var(--st-live)} .st.stale{color:var(--st-warn)} .st.offline{color:var(--st-err)} .st.fixture{color:var(--st-warn)} .st.loading{color:var(--tx-2)}
.st.live:before{content:"●";animation:stblink 2s ease-in-out infinite} .st.stale:before{content:"◐"} .st.offline:before{content:"✕"} .st.fixture:before{content:"▣"} .st.loading:before{content:"…"}
@keyframes stblink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.st.live:before{animation:none}}
.u-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;gap:10px;align-items:center;padding:9px max(16px,3vw) calc(9px + env(safe-area-inset-bottom,0px));background:#000e;border-top:1px solid #ffffff12;font:12px var(--f-mono);color:var(--tx-3);overflow-x:auto;white-space:nowrap}
.u-bar .prov{color:var(--tx-2)}
.u-bar .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.u-offline{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:var(--z-tip);display:none;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:var(--r-1);font:12px/1.4 var(--f-mono);background:#0a0000f2;border:1px solid var(--st-err);color:var(--tx-1)}
.u-offline.stale{border-color:var(--st-warn)}
.u-offline.show{display:block}
.copy{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;border:1px solid var(--line-3);font:600 11px var(--f-mono);color:var(--tx-2);background:#0a0a0a}
.copy:hover{color:#fff;border-color:#ffffff66}
.copy:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.copy.ok{color:var(--green);border-color:var(--green)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:12px/1.55 var(--f-mono)}
.kv dt{color:var(--tx-3)} .kv dd{margin:0;color:var(--tx-1);text-align:right;word-break:break-all}
.def{font-size:12px;line-height:1.5;color:var(--tx-2)}
.def b{color:var(--tx-1)}
.skeleton{background:linear-gradient(90deg,#0a0a0a,#141414,#0a0a0a);background-size:200% 100%;animation:skel 1.4s linear infinite;border-radius:6px;min-height:14px}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}