/* Page frame: header, rail, stage. The containers are static markup on every
   page; chrome.js fills the header and rail once it loads, and the rules below
   give the same picture before that and with scripts off. */

.sh-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--sh-bg); z-index: 0; }

.sh-header {
  position: relative; z-index: 3; flex: none; height: 52px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--sh-edge-dim); background: var(--sh-panel);
}
.sh-brand { display: flex; align-items: baseline; gap: 9px; flex: none; }
.sh-brand a { font: 500 15px/1 var(--font-heading); letter-spacing: .22em; color: var(--sh-ink); text-decoration: none; }
.sh-brand span { font: 400 8.5px ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--sh-faint-2); }
.sh-search { flex: 1; max-width: 420px; margin: 0; }
.sh-search input {
  width: 100%; height: 30px; padding: 0 10px; outline: none;
  background: var(--sh-bg-deep); border: 1px solid var(--sh-edge); border-radius: 8px;
  color: var(--sh-ink); font-size: 11.5px;
}
.sh-search input:focus { border-color: var(--sh-accent-2); }
.sh-header-end { flex: none; width: 190px; }

.sh-body { flex: 1; display: flex; min-height: 0; }

/* the rail floats over the page; this 56px shell holds the layout still */
.sh-railshell { width: 56px; flex: none; position: relative; z-index: 5200; }
.sh-rail {
  /* the top padding stands in for the SECTIONS header row the live rail adds */
  position: absolute; top: 0; bottom: 0; left: 0; width: 56px; padding: 43px 10px 14px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
  border-right: 1px solid var(--sh-edge-dim); background: var(--sh-bg-deep);
  transition: width .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s;
}
.sh-rail a {
  height: 32px; flex: none; padding: 0 6px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  font: 400 12px var(--font-body); color: var(--sh-dim); text-decoration: none; white-space: nowrap;
}
.sh-rail a i { width: 20px; flex: none; font-size: 15px; }
.sh-rail a span { opacity: 0; transition: opacity .16s; }
/* the static rail is the same on every page; each page names its own section */
body[data-section="overview"] .sh-rail a[data-s="overview"],
body[data-section="soul"] .sh-rail a[data-s="soul"],
body[data-section="hearth"] .sh-rail a[data-s="hearth"],
body[data-section="artifact"] .sh-rail a[data-s="artifact"],
body[data-section="orchestrator"] .sh-rail a[data-s="orchestrator"],
body[data-section="faction"] .sh-rail a[data-s="faction"],
body[data-section="astrology"] .sh-rail a[data-s="astrology"],
body[data-section="constellation"] .sh-rail a[data-s="constellation"],
body[data-section="tether"] .sh-rail a[data-s="tether"],
body[data-section="devlog"] .sh-rail a[data-s="devlog"],
body[data-section="complex"] .sh-rail a[data-s="complex"],
body[data-section="gallery"] .sh-rail a[data-s="gallery"],
body[data-section="community"] .sh-rail a[data-s="community"] { color: var(--sh-ink); font-weight: 500; }
body[data-section="overview"] .sh-rail a[data-s="overview"] i,
body[data-section="soul"] .sh-rail a[data-s="soul"] i,
body[data-section="hearth"] .sh-rail a[data-s="hearth"] i,
body[data-section="artifact"] .sh-rail a[data-s="artifact"] i,
body[data-section="orchestrator"] .sh-rail a[data-s="orchestrator"] i,
body[data-section="faction"] .sh-rail a[data-s="faction"] i,
body[data-section="astrology"] .sh-rail a[data-s="astrology"] i,
body[data-section="constellation"] .sh-rail a[data-s="constellation"] i,
body[data-section="tether"] .sh-rail a[data-s="tether"] i,
body[data-section="devlog"] .sh-rail a[data-s="devlog"] i,
body[data-section="complex"] .sh-rail a[data-s="complex"] i,
body[data-section="gallery"] .sh-rail a[data-s="gallery"] i,
body[data-section="community"] .sh-rail a[data-s="community"] i { color: var(--sh-accent-ink); }
.sh-rail hr { width: 100%; height: 1px; margin: 12px 0 9px; border: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--sh-dim) 20%, transparent), transparent); }
/* with scripts off the rail opens on hover or keyboard focus */
.no-js .sh-rail:hover, .no-js .sh-rail:focus-within { width: 186px; box-shadow: 12px 0 28px color-mix(in oklab, var(--sh-shadow) 42%, transparent); }
.no-js .sh-rail:hover a span, .no-js .sh-rail:focus-within a span { opacity: 1; }
.no-js .sh-rail a:hover { color: var(--sh-ink); background: color-mix(in oklab, var(--sh-accent-2) 12%, transparent); }

.sh-main { flex: 1; min-width: 0; position: relative; overflow: auto; background: var(--sh-stage); }
#soulhearth-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#sh-art, #sh-page, #sh-overlays { display: contents; }

/* document pages sit in a reading column; the overview board takes the stage */
.sh-wrap {
  position: relative; display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box;
  padding: 30px 38px 96px; max-width: 1180px;
}
body[data-page="overview"] .sh-wrap { padding: 22px 14px 22px 20px; max-width: none; }

/* ---------- sky ---------- */
.sh-sky, .sh-sky > div { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html[data-sky="off"] .sh-sky { display: none; }
.sh-aurora {
  position: absolute; inset: -18%; opacity: .55; will-change: transform;
  background:
    radial-gradient(36% 30% at 28% 26%, color-mix(in oklab, var(--sh-accent-2) 16%, transparent), transparent 70%),
    radial-gradient(30% 26% at 74% 68%, color-mix(in oklab, var(--sh-neb-a) 26%, transparent), transparent 72%),
    radial-gradient(26% 22% at 16% 78%, color-mix(in oklab, var(--sh-neb-b) 16%, transparent), transparent 74%);
  animation: sh-aurora 38s ease-in-out infinite;
}
.sh-par { position: absolute; inset: -60px; pointer-events: none; will-change: transform; }
#sh-par1 { perspective: 900px; perspective-origin: 50% 50%; }
.sh-lattice {
  position: absolute; opacity: 0;
  -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 8%, color-mix(in oklab, var(--sh-bg-deep) 60%, transparent) 52%, transparent 84%);
  mask-image: radial-gradient(58% 58% at 50% 50%, #000 8%, color-mix(in oklab, var(--sh-bg-deep) 60%, transparent) 52%, transparent 84%);
}
.sh-lattice path { fill: none; }
#sh-par2 {
  opacity: .5;
  background-image:
    radial-gradient(color-mix(in oklab, var(--sh-ink) 55%, transparent) .8px, transparent 1.2px),
    radial-gradient(color-mix(in oklab, var(--sh-star) 40%, transparent) .6px, transparent 1px),
    radial-gradient(color-mix(in oklab, var(--sh-ink) 30%, transparent) 1px, transparent 1.5px);
  background-size: 72px 58px, 47px 91px, 131px 67px;
  background-position: 0 0, 19px 33px, 58px 11px;
}
#sh-par3 {
  opacity: .6;
  background-image:
    radial-gradient(color-mix(in oklab, var(--sh-accent-ink) 45%, transparent) 1px, transparent 1.4px),
    radial-gradient(rgba(126, 196, 206, .3) .8px, transparent 1.2px),
    radial-gradient(rgba(214, 150, 170, .22) .8px, transparent 1.2px);
  background-size: 113px 97px, 163px 139px, 211px 181px;
  background-position: 26px 18px, 71px 92px, 140px 47px;
}
/* stars and motes: position, size and timing come from each element's custom properties */
.sh-star {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 calc(var(--s) * 3) var(--g);
  animation: sh-twinkle var(--d) ease-in-out var(--o) infinite;
}
.sh-mote {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 calc(var(--s) * 4) var(--g), 0 0 calc(var(--s) * 9) color-mix(in oklab, var(--g) 40%, transparent);
  animation: sh-mote var(--d) linear var(--o) infinite;
}
.sh-star.k0 { --c: color-mix(in oklab, var(--sh-ink) 35%, transparent); --g: color-mix(in oklab, var(--sh-ink) 40%, transparent); }
.sh-star.k1 { --c: color-mix(in oklab, var(--sh-accent-ink) 74%, transparent); --g: color-mix(in oklab, var(--sh-accent-ink) 40%, transparent); }
.sh-star.k2 { --c: rgba(150, 214, 224, .48); --g: rgba(150, 214, 224, .4); }
.sh-star.k3 { --c: rgba(226, 168, 190, .87); --g: rgba(226, 168, 190, .4); }
.sh-star.k4 { --c: color-mix(in oklab, var(--sh-star-warm) 61%, transparent); --g: color-mix(in oklab, var(--sh-star-warm) 40%, transparent); }
.sh-mote.k0 { --c: color-mix(in oklab, var(--sh-ink) 95%, transparent); --g: color-mix(in oklab, var(--sh-ink) 55%, transparent); }
.sh-mote.k1 { --c: color-mix(in oklab, var(--sh-accent-ink) 90%, transparent); --g: color-mix(in oklab, var(--sh-accent-ink) 55%, transparent); }
.sh-mote.k2 { --c: rgba(150, 214, 224, .8); --g: rgba(150, 214, 224, .55); }
.sh-mote.k3 { --c: rgba(226, 168, 190, .7); --g: rgba(226, 168, 190, .55); }
#sh-planet {
  position: absolute; right: -9%; bottom: -26%; width: min(58vw, 640px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 34% 26%, var(--sh-raise) 0%, var(--sh-shadow) 46%, var(--sh-shadow) 100%);
  box-shadow:
    inset -26px -18px 70px color-mix(in oklab, var(--sh-bg-deep) 75%, transparent),
    inset 22px 16px 60px color-mix(in oklab, var(--sh-accent) 5.5%, transparent),
    0 0 90px color-mix(in oklab, var(--sh-bg-deep) 80%, transparent);
}

/* ---------- page text before scripts load, and with scripts off ---------- */
.sh-doc { display: flex; flex-direction: column; gap: 10px; }
.sh-doc h1 { margin: 0; font: 500 26px var(--font-heading); letter-spacing: 0; color: var(--sh-ink); }
.sh-doc p { margin: 0; max-width: 62ch; font: 400 11.5px/1.6 var(--font-body); color: var(--sh-dim-3); text-wrap: pretty; }
.sh-doc ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sh-doc li a {
  display: block; padding: 7px 12px; border: 1px solid var(--sh-edge); border-radius: 8px;
  font: 400 11.5px var(--font-body); color: var(--sh-soft); text-decoration: none;
}
.sh-doc li a:hover { border-color: var(--sh-accent-2); color: var(--sh-accent-hi); }
.sh-note {
  margin-top: 12px; padding: 12px 14px; max-width: 62ch; border: 1px dashed var(--sh-edge-2); border-radius: 8px;
  font: 400 11.5px/1.6 var(--font-body); color: var(--sh-dim);
}
/* Scripts replace the static text with the live page. On list and community
   pages the two begin with the same heading, so the text shows at once. On the
   other pages they differ, so it waits for the live page, and fades in on its
   own if scripts never start. */
html:not(.no-js) .sh-late { display: none; }
html:not(.no-js):not(.sh-ready) body:not([data-page="list"]):not([data-page="community"]) .sh-doc {
  opacity: 0; animation: sh-doc-late .2s 2.5s forwards;
}
@keyframes sh-doc-late { to { opacity: 1; } }