/* Nexus Observatory UI components: styles that kit.css and page.css do not already provide. Tokens only (kit.css
   token block); no hard-coded colours, so light, dark and system themes follow automatically. */
.ui-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--hair2);border-radius:var(--rc);font:400 11px/1 var(--mono);letter-spacing:.04em;color:var(--t2)}
.ui-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font:400 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--t3)}
.ui-crumbs li+li::before{content:"/";margin-inline-end:6px;color:var(--hair2)}
.ui-crumbs li:first-child .nxo-i{margin-inline-end:6px}
.ui-crumbs a{color:var(--t2)}.ui-crumbs a:hover{color:var(--t1)}
.ui-crumbs [aria-current]{color:var(--t1)}
.ui-rail ol{margin:0;padding:0;list-style:none;border-inline-start:1px solid var(--hair)}
.ui-rail a{display:flex;gap:12px;padding:8px 0 8px 16px;margin-inline-start:-1px;border-inline-start:1px solid transparent;font:400 12.5px/1.35 var(--sans);color:var(--t3)}
.ui-rail a span{font:400 11px var(--mono);color:var(--t3)}
.ui-rail a:hover,.ui-rail a[aria-current]{color:var(--t1);border-inline-start-color:var(--accent)}
.ui-related{border-top:1px solid var(--hair);padding:64px 0}
.ui-related h2.eyebrow{margin:0 0 24px;font-size:11px}
.ui-related-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.ui-related h3{margin:0 0 10px;font:600 13px/1.3 var(--sans);letter-spacing:-.005em}
.ui-related ul{margin:0;padding:0;list-style:none}.ui-related li{padding:5px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.ui-related a{color:var(--t2)}.ui-related a:hover{color:var(--t1)}
.ui-empty{padding:40px 24px;border:1px dashed var(--hair2);border-radius:var(--r);text-align:start}
.ui-empty .nxo-ico{margin-block-end:16px}
.ui-empty h3{margin:0 0 6px;font:600 15px/1.35 var(--sans)}.ui-empty p{margin:0 0 16px;color:var(--t2);font-size:13.5px;max-width:60ch}
:where(.ui-crumbs,.ui-rail,.ui-related) a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.ui-rail a{transition:none}}
.ui-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--hair2);border-radius:var(--r);background:var(--surface);color:var(--t1)}
.ui-alert .nxo-i{flex:none;color:var(--accent-graphic,var(--accent));margin-top:-1px}
.ui-alert[data-kind=done] .nxo-i{color:var(--t1)}
.ui-alert b{font:600 13.5px/1.4 var(--sans)}.ui-alert p{margin:4px 0 0;color:var(--t2);font-size:13.5px}
/* cards with an icon tile: the tile sits above the key and title, 16 px below it */
.box>.nxo-ico{margin-block-end:16px;align-self:flex-start}
a.box:is(:hover,:focus-visible) .nxo-ico{color:var(--accent-graphic)}