/* 随轩 · tag atlas
   An old star chart on indigo paper: gold rings and spokes, stars coloured by topic, a star list beside it.
   indigo #0E1530 · night #16204A · gold #C9B27C · parchment #EFE6CF · cinnabar #E5533D */

.atlas {
  --ink: #EFE6CF; --muted: #A9A38F; --line: rgba(201, 178, 124, .26); --gold: #C9B27C; --cin: #E5533D;
  margin-top: 110px; padding: 76px 0 84px; color: var(--ink);
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 72% 64%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 82%, rgba(255, 244, 214, .45), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #1A2550 0%, #0E1530 62%, #0A1026 100%);
  border-top: 1px solid rgba(201, 178, 124, .35);
}
.atlas__head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 34px; }
.atlas__head h2 { font-family: var(--f-disp); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: .08em; color: #F3E6C4; }
.atlas__head p { max-width: 46em; font-size: 15.5px; line-height: 1.85; color: var(--muted); }

.atlas__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto; gap: 26px; width: min(1400px, calc(100% - 64px)); margin-inline: auto; align-items: stretch; }
.atlas__stage { grid-column: 1; grid-row: 1; }
.atlas__panel { grid-column: 2; grid-row: 1 / span 2; }

.atlas__stage {
  position: relative; height: clamp(560px, 74vh, 780px); overflow: hidden; border-radius: 6px;
  background:
    radial-gradient(52% 62% at 50% 54%, rgba(52, 70, 140, .42), transparent 72%),
    radial-gradient(90% 70% at 85% 0%, rgba(120, 60, 120, .18), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(30, 90, 120, .2), transparent 60%),
    #0A1029;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 80px rgba(0, 0, 0, .55);
}
.atlas__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/tex-grain.png"); opacity: .12; mix-blend-mode: screen; }
.atlas__sky { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; opacity: 0; transition: opacity .8s; }
.atlas__stage.is-ready .atlas__sky { opacity: 1; }
.atlas__stage.is-dragging .atlas__sky { cursor: grabbing; }
.atlas__sky:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

.atlas__tools { position: absolute; z-index: 3; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; pointer-events: none; }
.atlas__tools > * { pointer-events: auto; }
.atlas__find { position: relative; width: min(300px, 100%); }
.atlas__find input {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 20px; font: inherit; font-size: 14.5px; color: var(--ink);
  background: rgba(14, 21, 48, .78); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.atlas__find input::placeholder { color: rgba(239, 230, 207, .5); }
.atlas__find input:focus { outline: none; border-color: var(--gold); }
.atlas__sug { position: absolute; top: 46px; left: 0; right: 0; z-index: 4; padding: 6px; border-radius: 12px; background: #141D42; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--line); }
.atlas__sug li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.atlas__sug li[aria-selected="true"], .atlas__sug li:hover { background: rgba(201, 178, 124, .16); }
.atlas__sug li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.atlas__sug li small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.atlas__sug .is-none { cursor: default; color: var(--muted); }
.atlas__zoom { display: flex; gap: 6px; margin-left: auto; }
.atlas__zoom button {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 20px; font-size: 14px; color: var(--ink);
  background: rgba(14, 21, 48, .78); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, box-shadow .2s;
}
.atlas__zoom button:hover { background: rgba(201, 178, 124, .22); box-shadow: inset 0 0 0 1px var(--gold); }
.atlas__zoom [data-z="1"], .atlas__zoom [data-z="-1"] { font-size: 19px; line-height: 1; padding: 0; }

.atlas__legend { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -12px; }
.atlas__legend button {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 15px; font-size: 12.5px; color: var(--ink);
  background: rgba(14, 21, 48, .7); box-shadow: inset 0 0 0 1px rgba(201, 178, 124, .2); transition: box-shadow .2s, background-color .2s;
}
.atlas__legend button i { width: 8px; height: 8px; border-radius: 50%; }
.atlas__legend .sk-phil i { background: #F4E4C1; } .atlas__legend .sk-hps i { background: #E6B865; } .atlas__legend .sk-cult i { background: #FF7A62; } .atlas__legend .sk-ai i { background: #7EB0FF; }
.atlas__legend .sk-web3 i { background: #B996FF; } .atlas__legend .sk-teach i { background: #8FDDB0; } .atlas__legend .sk-life i { background: #FFA6C5; } .atlas__legend .sk-site i { background: #9FE6F0; }
.atlas__legend button:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.atlas__legend button[aria-pressed="true"] { background: rgba(201, 178, 124, .26); box-shadow: inset 0 0 0 1px var(--gold); }
.atlas__tip { position: absolute; z-index: 3; right: 16px; bottom: 20px; max-width: 220px; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: right; }

.atlas__hover {
  position: absolute; z-index: 5; top: 0; left: 0; max-width: 240px; padding: 10px 12px; pointer-events: none;
  border-radius: 8px; background: rgba(14, 21, 48, .92); box-shadow: inset 3px 0 0 var(--c, var(--gold)), 0 14px 30px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--line);
  font-size: 13px; line-height: 1.5; transition: transform .12s ease-out;
}
.atlas__hover b { display: block; font-size: 16px; color: #FFF6DC; }
.atlas__hover small { display: block; color: var(--muted); }
.atlas__hover span { display: block; margin-top: 4px; color: #D9CFB4; }

.atlas__fallback { position: absolute; inset: 70px 16px 60px; overflow: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; align-content: flex-start; }
.atlas__fallback a { color: var(--ink); }
.atlas__fallback small { color: var(--muted); }
.js .atlas__fallback { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); inset: auto; }
html:not(.js) .atlas__tools, html:not(.js) .atlas__legend { display: none; }

.atlas__cover { position: absolute; z-index: 6; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 70px; color: #FFF6DC; font-size: 15px; background: linear-gradient(transparent 55%, rgba(10, 16, 38, .7)); }
.atlas__cover::after { content: ""; position: absolute; }
.atlas__done { position: absolute; z-index: 6; top: 64px; right: 16px; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--cin); color: #FFFFFF; font-size: 14px; }
.atlas__stage:not(.is-active) .atlas__sky { touch-action: pan-y; }

/* the star list */
.atlas__panel {
  display: flex; flex-direction: column; gap: 22px; max-height: clamp(560px, 74vh, 780px); overflow-y: auto; padding: 22px 22px 24px; border-radius: 6px;
  background: linear-gradient(#16204A, #121A3D); box-shadow: inset 0 0 0 1px var(--line); scrollbar-color: rgba(201, 178, 124, .4) transparent;
}
.atlas__panel h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-family: var(--f-serif); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: #F3E6C4; }
.atlas__panel h3::before { content: ""; width: 12px; height: 12px; flex: none; border: 1px solid var(--gold); border-radius: 50%; box-shadow: inset 0 0 0 3px #16204A, inset 0 0 0 6px var(--gold); transform: translateY(1px); }
.atlas__empty { font-size: 14px; line-height: 1.75; color: var(--muted); }
.atlas__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas__chips button, .atlas__nearlist button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border-radius: 16px; font-size: 14px; color: var(--ink);
  background: rgba(239, 230, 207, .07); box-shadow: inset 0 0 0 1px var(--line);
}
.atlas__chips button { box-shadow: inset 0 0 0 1.5px var(--cin); }
.atlas__chips button small { color: var(--muted); font-size: 12px; }
.atlas__chips button b { margin-left: 2px; color: var(--muted); font-weight: 400; }
.atlas__chips button:hover b { color: #FFFFFF; }
.atlas__chips i, .atlas__nearlist i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.atlas__nearlist { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas__nearlist button:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.atlas__nearlist button.is-on { box-shadow: inset 0 0 0 1.5px var(--cin); }
.atlas__acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; }
.atlas__open { color: #F3E6C4; }
.atlas__clear { color: var(--muted); text-decoration: underline; }
.atlas__posts { display: grid; gap: 2px; }
.atlas__posts a { display: grid; gap: 2px; padding: 9px 0 10px; color: var(--ink); text-decoration: none; border-bottom: 1px dashed rgba(201, 178, 124, .22); }
.atlas__posts a:hover .atlas__pt { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.atlas__pt { font-size: 14.5px; line-height: 1.55; }
.atlas__pm { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.atlas__pm i { width: 7px; height: 7px; border-radius: 50%; }
.atlas__posts .is-msg { padding: 8px 0; font-size: 14px; color: var(--muted); }
.atlas__more { margin-top: 10px; height: 36px; padding: 0 16px; border-radius: 18px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.atlas__more:hover { box-shadow: inset 0 0 0 1px var(--gold); }

.bdg--atlas { background: #0F1734; color: #F3E6C4; box-shadow: inset 0 0 0 1px #C9B27C; }

@container yh (max-width: 1100px) {
  .atlas__body { grid-template-columns: minmax(0, 1fr); }
  .atlas__panel { grid-column: 1; grid-row: 3; max-height: none; }
  .atlas__legend { margin-top: -8px; }
}
@container yh (max-width: 760px) {
  .atlas { margin-top: 70px; padding: 48px 0 56px; }
  .atlas__head { grid-template-columns: minmax(0, 1fr); }
  .atlas__head h2 { font-size: 40px; }
  .atlas__body { width: calc(100% - 20px); gap: 16px; }
  .atlas__stage { height: 480px; }
  .atlas__tools { top: 10px; left: 10px; right: 10px; }
  .atlas__find { width: 100%; }
  .atlas__zoom { margin-left: 0; }
  .atlas__legend button { height: 28px; font-size: 12px; }
  .atlas__tip { display: none; }
  .atlas__panel { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .atlas__sky { transition: none; } .atlas__hover { transition: none; } }
.atlas__start { margin-top: 12px; }