/* AUX ECO Ghost theme on aux.form (assets/aux.form, vendored by scripts/vendor-form.sh).
   Tokens, panels, buttons and badges come from the system; this file places
   things: the sphere world HUD, the reader for posts and pages, and the
   few Koenig card rules Ghost requires. */
:root { --gap: var(--aux-space-3); --measure: 680px; --wide: 1040px; }

html, body { margin: 0; }
body { min-height: 100vh; }
[hidden] { display: none !important; }
.row { display: flex; gap: var(--aux-space-1); align-items: center; }
.brand { display: inline-flex; align-items: baseline; gap: var(--aux-space-2); text-decoration: none; }
.brand .label { color: var(--aux-fg-3); }

/* ---------- sphere world (home + tag pages) ---------- */
#stage, #hud { display: none; }
.has-world { overflow: hidden; height: 100vh; }
.has-world #stage { display: block; position: fixed; inset: 0; }
.has-world #stage canvas { display: block; outline: none; touch-action: none; }
.has-world #hud { display: block; position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud > .panel { position: absolute; }
#hud .panel-head { min-height: 38px; padding: var(--aux-space-2) var(--aux-space-2) var(--aux-space-2) var(--aux-space-3); }

/* while loading, the list waits behind the loader; .no-world (no WebGL, script never ran) shows it */
#world-data { display: none; }
.no-world #world-data { display: block; }
.no-world .loader { display: none; }

/* loader: wordmark, a step label and a bar that jumps between steps (no motion, per aux.form) */
.loader {
  position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: var(--aux-space-4);
  background: radial-gradient(circle, var(--aux-dot) 1px, transparent 1.2px) 0 0 / 24px 24px, var(--aux-bg);
}
.loader.done { display: none; }
.loader-mark { font-size: clamp(36px, 7vw, 64px); }
.loader-bar { width: min(240px, 60vw); height: 2px; background: var(--aux-line-2); }
.loader-bar span { display: block; height: 100%; width: 12%; background: var(--aux-fg); }

/* the server-rendered list stays for screen readers once the world runs */
.has-world #world-data { display: block; }
.has-world .fallback {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.index {
  top: var(--gap); left: var(--gap); width: 268px; max-height: calc(100vh - 2 * var(--gap) - 52px);
  display: flex; flex-direction: column;
}
.index-body { overflow-y: auto; padding-bottom: var(--aux-space-3); }
.index .desc { margin: var(--aux-space-3) var(--aux-space-3) 0; color: var(--aux-fg-2); font-size: var(--aux-text-sm); line-height: 1.5; }
.index .section { display: block; margin: var(--aux-space-4) var(--aux-space-3) var(--aux-space-1); color: var(--aux-fg-3); }
.index .tools { padding: var(--aux-space-4) var(--aux-space-3) 0; }
.index .tools .btn { width: 100%; }
.index-fold { display: none; }
.index.folded .index-body { display: none; }

#sphere-list, .links { list-style: none; margin: 0; padding: 0; }
#sphere-list li {
  display: grid; grid-template-columns: 6px 1fr auto; gap: var(--aux-space-3); align-items: center;
  padding: 6px var(--aux-space-3); cursor: pointer; font-size: var(--aux-text-sm); border-left: 1px solid transparent;
}
#sphere-list li:hover { background: var(--aux-surface-2); }
#sphere-list li.active { border-left-color: var(--aux-fg); background: var(--aux-surface-2); }
#sphere-list .mark { width: 6px; height: 6px; background: var(--aux-fg-3); }
#sphere-list li.active .mark { background: var(--aux-fg); }
#sphere-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sphere-list .count { font: var(--aux-text-xs) var(--aux-font-mono); color: var(--aux-fg-3); font-variant-numeric: tabular-nums slashed-zero; }
.links a {
  display: block; padding: 5px var(--aux-space-3); font-size: var(--aux-text-sm); text-decoration: none; color: var(--aux-fg-2);
  border-left: 1px solid transparent;
}
.links a:hover { color: var(--aux-fg); background: var(--aux-surface-2); }

.minimap { top: var(--gap); right: var(--gap); width: 232px; }
#minimap-canvas { display: block; width: 230px; height: 180px; cursor: crosshair; }

.inspector {
  top: calc(var(--gap) + 222px + 8px); right: var(--gap); width: 320px;
  max-height: calc(100vh - 222px - 3 * var(--gap) - 52px); overflow-y: auto; padding: var(--aux-pad);
  display: flex; flex-direction: column; gap: var(--aux-space-3);
}
.inspector .hero {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--aux-line);
  border-radius: var(--aux-radius); display: block; background: var(--aux-surface-2);
}
.inspector .close { position: absolute; top: 6px; right: 6px; }
.inspector .head { display: flex; gap: var(--aux-space-2); align-items: center; padding-right: 28px; }
.inspector .title { margin: 0; font: var(--aux-weight-head) var(--aux-h2)/1.2 var(--aux-font-sans); letter-spacing: var(--aux-tracking-head); }
.inspector .title a { text-decoration: none; }
.inspector .title a:hover { text-decoration: underline; }
.inspector .meta {
  display: flex; justify-content: space-between; gap: var(--aux-space-2); font: var(--aux-text-xs)/1.4 var(--aux-font-mono);
  color: var(--aux-fg-2); text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums slashed-zero;
}
.inspector .desc { margin: 0; color: var(--aux-fg-2); font-size: var(--aux-text-sm); line-height: 1.55; }
.inspector .chips { display: flex; flex-wrap: wrap; gap: var(--aux-space-1) var(--aux-space-3); }
.inspector .chips .badge { cursor: pointer; background: none; border: 0; padding: 2px 0; }
.inspector .chips .badge:hover { color: var(--aux-fg); }
.inspector .actions { display: flex; gap: var(--aux-space-1); padding-top: var(--aux-space-1); }
.inspector .actions .btn { flex: 1; }
.inspector .members { display: grid; gap: 1px; }
.inspector .members button {
  display: grid; grid-template-columns: 1fr auto; gap: var(--aux-space-3); text-align: left; padding: 6px 0;
  background: none; border: 0; border-bottom: 1px solid var(--aux-line); color: var(--aux-fg); font: inherit; font-size: var(--aux-text-sm); cursor: pointer;
}
.inspector .members button:hover { color: var(--aux-fg-2); }
.inspector .members .num { font: var(--aux-text-xs) var(--aux-font-mono); color: var(--aux-fg-3); }

.telemetry {
  position: absolute; left: var(--gap); bottom: var(--gap); pointer-events: none !important; white-space: pre;
  font-size: var(--aux-text-xs); letter-spacing: .08em; color: var(--aux-fg-2);
}
.axes { right: var(--gap); bottom: var(--gap); display: flex; gap: var(--aux-space-1); padding: var(--aux-space-1); }

.tooltip {
  position: absolute; pointer-events: none !important; max-width: 300px; padding: 7px 10px;
  border: 1px solid var(--aux-line-2); transform: translate(14px, 14px); font-size: var(--aux-text-sm);
}
.tooltip .label { display: block; margin-top: 4px; }

#hud ::-webkit-scrollbar { width: 6px; }
#hud ::-webkit-scrollbar-thumb { background: var(--aux-line-2); border-radius: 3px; }

@media (max-width: 760px) {
  .index { width: auto; right: var(--gap); max-height: 52vh; }
  .index-fold { display: inline-flex; }
  .minimap, .telemetry { display: none; }
  .inspector { left: var(--gap); right: var(--gap); width: auto; top: auto; bottom: 56px; max-height: 46vh; }
  .inspector .hero { aspect-ratio: 21 / 9; }
}

/* ---------- top bar (reader pages and the fallback list) ---------- */
.topbar {
  position: sticky; top: var(--gap); z-index: 10; margin: var(--gap); display: flex; align-items: center;
  gap: var(--aux-space-4); padding: var(--aux-space-2) var(--aux-space-2) var(--aux-space-2) var(--aux-space-4);
}
.topbar-nav { display: flex; gap: var(--aux-space-4); flex: 1; overflow-x: auto; }
.topbar-nav a { text-decoration: none; white-space: nowrap; }
.topbar-nav a:hover { color: var(--aux-fg); }

/* fallback list (no WebGL) */
.fallback-body { max-width: var(--wide); margin: var(--aux-space-8) auto; padding: 0 var(--aux-space-4); display: grid; gap: var(--aux-space-6); }
.fallback-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--aux-space-2) var(--aux-space-5); }
.fallback-tags a, .article-tags a { text-decoration: none; }
.fallback-tags a:hover, .article-tags a:hover { color: var(--aux-fg); }
.list .list-title { text-decoration: none; }
.list .list-meta { white-space: normal; }

/* ---------- reader: posts and pages ---------- */
.reader { padding: var(--aux-space-8) var(--aux-space-4) var(--aux-space-12); }
.article { max-width: var(--wide); margin: 0 auto; }
.article-head, .reader > .article-head { max-width: var(--measure); margin: 0 auto var(--aux-space-8); display: grid; gap: var(--aux-space-4); }
.article-meta { display: flex; gap: var(--aux-space-4); }
.article-title { margin: 0; font: var(--aux-weight-head) clamp(28px, 5vw, 44px)/1.08 var(--aux-font-sans); letter-spacing: var(--aux-tracking-tight); text-wrap: balance; }
.article-excerpt { margin: 0; font-size: 18px; line-height: 1.5; color: var(--aux-fg-2); }
.article-tags { display: flex; flex-wrap: wrap; gap: var(--aux-space-2) var(--aux-space-5); }
.article-image { margin: 0 auto var(--aux-space-8); }
.article-image img { display: block; width: 100%; height: auto; border: 1px solid var(--aux-line); border-radius: var(--aux-radius-lg); }
figcaption { margin-top: var(--aux-space-2); font: var(--aux-text-xs)/1.5 var(--aux-font-mono); color: var(--aux-fg-3); text-align: center; letter-spacing: .04em; }

.gh-content { display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2)) [main-start] min(var(--measure), 100%) [main-end] minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end] minmax(0, 1fr) [full-end]; font-size: 16.5px; line-height: 1.7; }
.gh-content > * { grid-column: main; margin: 0 0 1.2em; }
.gh-content > .kg-width-wide { grid-column: wide; }
.gh-content > .kg-width-full { grid-column: full; }
.gh-content > .kg-width-full img { border-radius: 0; }
.gh-content h2, .gh-content h3, .gh-content h4 { font-weight: var(--aux-weight-head); letter-spacing: var(--aux-tracking-head); line-height: 1.2; margin: 1.8em 0 .6em; }
.gh-content h2 { font-size: 26px; }
.gh-content h3 { font-size: 20px; }
.gh-content h4 { font: 400 var(--aux-label-size)/1.4 var(--aux-font-mono); letter-spacing: var(--aux-label-tracking); text-transform: uppercase; color: var(--aux-fg-2); }
.gh-content a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gh-content a:hover { text-decoration-thickness: 2px; }
.gh-content strong { font-weight: var(--aux-weight-strong); }
.gh-content hr { border: 0; border-top: 1px dashed var(--aux-line-2); margin: 2.4em 0; }
.gh-content blockquote:not([class]) { border-left: 1px solid var(--aux-fg); padding-left: var(--aux-space-5); color: var(--aux-fg-2); font-size: 19px; line-height: 1.5; }
.gh-content code { font: .88em var(--aux-font-mono); padding: 1px 4px; background: var(--aux-surface-2); border-radius: var(--aux-radius); }
.gh-content pre { font: 13px/1.6 var(--aux-font-mono); padding: var(--aux-pad); overflow-x: auto; background: var(--aux-surface-2); border: 1px solid var(--aux-line); border-radius: var(--aux-radius-lg); }
.gh-content pre code { padding: 0; background: none; font-size: inherit; }
.gh-content img { max-width: 100%; height: auto; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content .kg-image-card img, .gh-content .kg-gallery-image img, .gh-content .kg-video-card { border-radius: var(--aux-radius-lg); }
.gh-content table { border-collapse: collapse; font-size: var(--aux-text-sm); width: 100%; }
.gh-content th, .gh-content td { border-bottom: 1px solid var(--aux-line); padding: 8px 10px; text-align: left; }
.gh-content th { font: 400 var(--aux-label-size)/1.4 var(--aux-font-mono); letter-spacing: var(--aux-label-tracking); text-transform: uppercase; color: var(--aux-fg-2); }
.gh-content .kg-bookmark-card a.kg-bookmark-container { border-color: var(--aux-line-2); border-radius: var(--aux-radius-lg); color: inherit; }
.gh-content .kg-button-card a.kg-btn, .gh-content .kg-product-card a.kg-product-card-button { font: 500 var(--aux-text-sm)/1 var(--aux-font-mono); letter-spacing: .14em; text-transform: uppercase; border-radius: var(--aux-radius); }
.gh-content .kg-callout-card { border-radius: var(--aux-radius-lg); }

.article-foot {
  max-width: var(--measure); margin: var(--aux-space-12) auto 0; padding-top: var(--aux-space-5); border-top: 1px dashed var(--aux-line-2);
  display: flex; justify-content: space-between; gap: var(--aux-space-3); flex-wrap: wrap;
}
.gh-pagination, .pagination { max-width: var(--wide); margin: var(--aux-space-6) auto; display: flex; justify-content: space-between; font: var(--aux-text-xs) var(--aux-font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- error ---------- */
.error { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--aux-space-5); text-align: center; padding: var(--aux-space-6); }
.error-code { font-size: clamp(80px, 18vw, 200px); margin: 0; }

@media (max-width: 600px) {
  .topbar { gap: var(--aux-space-3); padding-left: var(--aux-space-3); }
  .topbar-nav { gap: var(--aux-space-3); }
}