/* Nexus Observatory icons (system/icons). Ink by default; red only for hover, focus and the active state. */
.nxo-i{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle;overflow:visible;color:inherit}
.nxo-i[data-s="16"]{width:16px;height:16px}
.nxo-i[data-s="20"]{width:20px;height:20px}
.nxo-i[data-s="32"]{width:32px;height:32px}
.nxo-i--muted{color:var(--t3,#a3a3a3)}
/* inline with text: sits on the text baseline, 8 px gap */
.nxo-i--inline{width:16px;height:16px;vertical-align:-.2em;margin-inline-end:8px}
/* a tile for cards and feature grids: a 40 px (48 px large) hairline square holding the icon in muted ink */
.nxo-ico{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--hair2,rgba(255,255,255,.2));border-radius:5px;color:var(--t2,#d4d4d4);transition:color .15s,border-color .15s}
.nxo-ico--lg{width:48px;height:48px}
.nxo-ico--sm{width:32px;height:32px}
.nxo-ico--bare{border:0;width:auto;height:auto;border-radius:0}
/* red only on hover, focus and the active state: hover on the card or link that holds the tile, or the state itself */
:is(a,button,.cell,.box,.card,.nxo-hot):is(:hover,:focus-visible) .nxo-ico,
:is(a,button):is(:hover,:focus-visible) > .nxo-i,
.nxo-ico[data-active],[aria-current] > .nxo-i,[aria-current] .nxo-ico,[aria-pressed=true] > .nxo-i{color:var(--accent-graphic,currentColor)}
:is(a,button,.cell,.box,.card,.nxo-hot):is(:hover,:focus-visible) .nxo-ico{border-color:var(--hair2,rgba(255,255,255,.2))}
/* eyebrow, chip and link rows that lead with an icon: 16 px icon, 8 px gap, aligned to the first line */
.nxo-eb{display:flex;align-items:center;gap:8px}
.nxo-eb .nxo-i{margin-inline-end:0}
/* the icon on a card that has a picture: floats over the picture's corner, 12 px in */
.nxo-ico--float{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;background:var(--bg,#000)}
/* check and arrow lists: the icon takes the place of the bullet, 16 px with an 8 px gap */
.nxo-ul{list-style:none;margin:0;padding:0}
.nxo-ul>li{display:flex;align-items:flex-start;gap:8px}
.nxo-ul>li>.nxo-i{margin-block-start:.18em;color:var(--t3,#a3a3a3)}
/* direction-bearing icons turn with the writing direction */
:is([dir=rtl],:dir(rtl)) .nxo-i[data-dir]{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.nxo-ico{transition:none}}
@media (forced-colors:active){.nxo-i,.nxo-ico{color:CanvasText;forced-color-adjust:auto}}
/* ---- bindings for components that already exist ---- */
.is-dom span{display:inline-flex;align-items:center;gap:6px}
.lines a>.nxo-i{color:var(--t3)}
.lines a.cur>.nxo-i{color:var(--accent-graphic,currentColor)}
.lines a:is(:hover,:focus-visible)>.nxo-i{color:var(--accent-graphic,currentColor)}
.inds a:is(:hover,:focus-visible) .nxo-i{color:var(--accent-graphic,currentColor)}
.cell:is(:hover,:focus-visible) .nxo-ico--float,.tc:is(:hover,:focus-visible) .nxo-ico--float{color:var(--accent-graphic,currentColor)}
.route>.nxo-ico{align-self:flex-start;margin-block-end:8px}
.route:is(:hover,:focus-within) .nxo-ico{color:var(--accent-graphic,currentColor)}