/* Search Atlas — product CSS; the hellojade kit (tokens.css + hj-ui.css) carries the rest. */
html, body { height: 100%; margin: 0; background: var(--hj-semantic-bg-page); color: var(--hj-semantic-text-primary); font-family: var(--hj-font-family-sans); }
body.app { display: grid; grid-template-rows: auto auto 1fr auto; height: 100vh; overflow: hidden; }
.top { min-height: 0; height: auto; display: flex; gap: var(--hj-space-3); align-items: center; padding: var(--hj-space-2) var(--hj-space-4); border-bottom: 1px solid rgba(232,255,246,.08); flex-wrap: wrap; }
.top .grow { flex: 1 1 220px; min-width: 160px; }
.hj-wordmark { font-size: 22px; letter-spacing: -1px; font-weight: 800; }
.hj-wordmark .hello { color: var(--hj-semantic-wordmark-hello); } .hj-wordmark .jade { color: var(--hj-semantic-wordmark-jade); }
.stage { overflow: hidden; display: grid; grid-template-columns: 0 1fr 0; min-height: 0; position: relative; transition: grid-template-columns var(--hj-duration-cut-out) var(--hj-easing-ease-out-cubic); }
body.list-open .stage { grid-template-columns: 300px 1fr 0; }
body.has-detail .stage { grid-template-columns: 0 1fr 400px; }
body.list-open.has-detail .stage { grid-template-columns: 300px 1fr 400px; }
.list, .detail { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border-color: rgba(232,255,246,.08); background: var(--hj-semantic-bg-surface); }
.list { border-right: 0; } body.list-open .list { border-right: 1px solid rgba(232,255,246,.08); }
.list-head { padding: 8px 12px; border-bottom: 1px solid rgba(232,255,246,.08); }
.detail { border-left: 0; position: relative; } body.has-detail .detail { border-left: 1px solid rgba(232,255,246,.08); }
.results { overflow: auto; flex: 1; padding: var(--hj-space-1); }
.res { display: grid; grid-template-columns: 82px 1fr auto; white-space: nowrap; gap: var(--hj-space-2); align-items: center; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; padding: 6px 8px; border-radius: var(--hj-radius-sm); cursor: pointer; font: inherit; font-size: var(--hj-font-size-caption); }
.res:hover, .res:focus-visible { background: rgba(35,197,146,.12); outline: none; }
.res-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-wrap { position: relative; min-width: 0; min-height: 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(15,140,104,.18), transparent 60%), var(--hj-semantic-bg-page); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.tip { position: absolute; pointer-events: none; background: var(--hj-semantic-bg-surface); border: 1px solid rgba(35,197,146,.35); border-radius: var(--hj-radius-sm); padding: 6px 10px; font-size: 12px; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 3; }
.boot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: var(--hj-space-4) var(--hj-space-6); font-family: var(--hj-font-family-mono); }
.hud { position: absolute; left: var(--hj-space-3); bottom: var(--hj-space-3); display: flex; flex-direction: row; gap: var(--hj-space-2); align-items: center; background: rgba(11,31,23,.88); border: 1px solid rgba(232,255,246,.1); border-radius: var(--hj-radius-md); padding: 4px 8px; backdrop-filter: blur(6px); white-space: nowrap; }
.hud .hj-btn--icon { width: 28px; height: 28px; display: inline-grid; place-items: center; }
.legend { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px var(--hj-space-4); border-bottom: 1px solid rgba(232,255,246,.08); background: var(--hj-semantic-bg-surface); }
.legend::-webkit-scrollbar { display: none; }
.legend .hj-chip { flex: 0 0 auto; }
.legend-chip { cursor: pointer; } .legend-chip.is-off { opacity: .35; }
.hj-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.detail .close { position: absolute; right: 8px; top: 8px; z-index: 2; }
#detail { overflow: auto; padding: var(--hj-space-4); display: flex; flex-direction: column; gap: var(--hj-space-3); }
#detail .hj-title { font-size: var(--hj-font-size-h3); line-height: var(--hj-font-leading-tight); margin: 6px 0; padding-right: 32px; }
#detail p { margin: 6px 0 0; line-height: var(--hj-font-leading-body); font-size: 14px; }
#detail .hj-card { padding: var(--hj-space-3); flex: 0 0 auto; overflow: visible; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.srcs { margin: 6px 0 0; padding-left: 18px; font-size: 12px; word-break: break-all; }
.srcs a, #detail a { color: var(--hj-semantic-link); }
.bottom { display: grid; grid-template-columns: auto minmax(120px,1fr) auto; grid-template-areas: "stats years ver"; gap: var(--hj-space-4); align-items: center; padding: var(--hj-space-2) var(--hj-space-4); border-top: 1px solid rgba(232,255,246,.08); background: var(--hj-semantic-bg-surface); }
#stats { grid-area: stats; margin-inline-start: 0; }
#years { grid-area: years; }
#dbver { grid-area: ver; white-space: nowrap; }
@media (max-width: 1180px) { #dbver { display: none; } .bottom { grid-template-columns: auto minmax(120px,1fr); grid-template-areas: "stats years"; } }
.hj-stats { display: flex; gap: var(--hj-space-4); }
.hj-stat .hj-title { font-size: 20px; line-height: 1.1; }
.years { display: flex; gap: 2px; align-items: flex-end; overflow-x: auto; padding: 2px 0; }
.yr { background: transparent; border: 0; padding: 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--hj-semantic-text-primary); opacity: .75; }
.yr:hover { opacity: 1; }
.yr i { display: block; width: 14px; background: var(--hj-semantic-brand-bright); border-radius: 2px 2px 0 0; }
.yr b { font-size: 9px; font-weight: 400; font-family: var(--hj-font-family-mono); }
@media (max-width: 900px) {
  body.has-detail .stage, body.list-open.has-detail .stage { grid-template-columns: 0 1fr 0; }
  body.has-detail .detail { position: absolute; inset: 0; z-index: 5; }
  body.list-open .stage { grid-template-columns: 240px 1fr 0; }
  .bottom { grid-template-columns: 1fr; grid-template-areas: "stats" "years"; gap: var(--hj-space-2); }
  .hj-stats { gap: var(--hj-space-3); overflow-x: auto; }
  #dbver { display: none; }
}
@media (max-width: 600px) {
  .top { padding: 6px 8px; gap: 6px; }
  .hj-wordmark { font-size: 18px; }
  .hj-stat .hj-sub { display: none; }
  .hud .hj-hint { display: none; }
}