/* Constellation Join: anything the kit's styles (../kit.css) don't already cover. The sky is always night; the rest uses the Library's tokens. */
.fidget[data-fidget="constellations"] { position: relative; }
.fidget[data-fidget="constellations"] .fidget-stage { background: #081029; cursor: crosshair; }

/* the tools row: Sky, Undo, Delete line, Shooting stars, and the folded name/save/picture controls */
.cj-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-height: 44px; max-width: 100%; min-width: 0; }
.cj-field label { font: 700 .85rem/1.2 var(--mono); text-transform: uppercase; }
.cj-field select { max-width: min(17rem, 100%); min-width: 0; text-overflow: ellipsis; }
.cj-field input { min-height: 44px; width: 14rem; max-width: 100%; padding: .4rem .6rem; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.cj-field input:focus-visible, .cj-field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fidget-tools [hidden] { display: none !important; }
.fidget-tools .btn[disabled], .fidget-tools select[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cj-more { flex-basis: 100%; }
.cj-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 700 .85rem/1.2 var(--mono); text-transform: uppercase; color: var(--ink); }
.cj-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cj-more-in { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .4rem 0 .2rem; }

/* the card a traced constellation opens: the Library's own card look */
.cj-card { margin: 1rem 0 0; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); padding: 1rem 1.1rem; max-width: 40rem; }
.cj-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cj-card-k { margin: 0 0 .3rem; font: 400 1.1rem/1.2 var(--pixel); letter-spacing: .04em; color: var(--pink); }
.cj-card h3 { margin: 0 0 .4rem; font: 700 1.3rem/1.2 var(--head); }
.cj-card-fact { margin: 0 0 .8rem; }
.cj-card-lib { border-top: 2px dashed var(--line); padding-top: .7rem; }
.cj-card-from { margin: 0 0 .3rem; font: 700 .8rem/1.3 var(--mono); text-transform: uppercase; color: var(--muted); }
.cj-card h4 { margin: .2rem 0 .4rem; font: 700 1.1rem/1.25 var(--head); }
.cj-card-why { margin: 0 0 .5rem; font-weight: 600; }
.cj-card-sum { margin: 0 0 .5rem; color: var(--muted); }
.cj-card-meta { margin: 0 0 .5rem; font: 400 .85rem/1.4 var(--mono); color: var(--muted); }
.cj-card-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 0; }
.cj-card-row .btn { min-height: 44px; }
.cj-card-row .btn-ghost { color: var(--ink); }