/* Shared world shell: stable reading layer + page-specific observation vantage. */
html {
  background: var(--void);
  accent-color: var(--acc);
}

body.zzk-portal {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--world-sky) 74%, transparent), transparent 44vh),
    var(--void);
  color: var(--ink);
  font-family: var(--sf);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  transition: background .8s var(--ease-world), color .8s var(--ease-world);
}

body.zzk-portal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  background:
    linear-gradient(90deg, transparent 49.92%, var(--hair2) 50%, transparent 50.08%),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--hair2) 32px, transparent 33px);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body.zzk-portal > main,
body.zzk-portal > footer {
  position: relative;
  z-index: 2;
}

body.zzk-portal .top {
  min-height: var(--nav-h);
  padding: 14px var(--page-gutter);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* Night reports keep one persistent chrome layer only. The shared navigation
   is an opaque reading strip; the night selector belongs to the document and
   scrolls away with it instead of competing as a second sticky header. */
body.zzk-page--report .top {
  background: var(--void);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--void) 34%, transparent);
  backdrop-filter: none;
}

body.zzk-page--report .night-index {
  position: relative;
  top: auto;
  z-index: 3;
  background: var(--reading);
  backdrop-filter: none;
}

body.zzk-portal .nav {
  gap: clamp(12px, 1.6vw, 22px);
}

body.zzk-portal .nav .menu {
  background: var(--reading-strong);
  border-color: var(--hair);
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(18px) saturate(.85);
}

body.zzk-portal .nav .tg,
body.zzk-portal .nav .lang-switch {
  min-height: 32px;
  border-color: var(--hair);
  padding-inline: 11px;
  font-size: var(--fs-label);
  letter-spacing: .08em;
}

body.zzk-portal .zsub { display: none; }

body.zzk-portal .zsub h1 {
  font-size: clamp(1.1rem, 1vw + .92rem, 1.55rem);
  letter-spacing: .14em;
}

body.zzk-portal .zsub .zsubtag {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

/* Full-screen chronicle tool used to reserve a second title row. The title now
   lives in the shared HUD, so its controls and canvas begin directly below it. */
body.zzk-vantage--knowledge .bar {
  top: var(--nav-h);
  height: 48px;
  padding-inline: var(--page-gutter);
  background: color-mix(in srgb, var(--reading-strong) 88%, transparent);
  border-color: var(--hair2);
  backdrop-filter: blur(18px) saturate(.82);
}
body.zzk-vantage--knowledge .ctrl { gap: 7px; }
body.zzk-vantage--knowledge .seg,
body.zzk-vantage--knowledge .zoom,
body.zzk-vantage--knowledge .tog { border-color: var(--hair2); }
body.zzk-vantage--knowledge .seg button {
  min-height: 31px;
  padding: 7px 13px;
  color: var(--faint);
}
body.zzk-vantage--knowledge .seg button.on {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  box-shadow: inset 0 -2px var(--acc);
}
body.zzk-vantage--knowledge .zoom { min-height: 31px; }
body.zzk-vantage--knowledge .zoom button { width: 31px; height: 30px; }
body.zzk-vantage--knowledge .tog {
  min-height: 31px;
  padding: 7px 11px;
  color: var(--faint);
}
body.zzk-vantage--knowledge .tog.on {
  color: var(--ink);
  border-color: var(--hair);
  box-shadow: inset 0 -2px var(--acc);
}
body.zzk-vantage--knowledge .filt {
  top: calc(var(--nav-h) + 48px);
  height: 42px;
  padding-inline: var(--page-gutter);
  gap: 4px;
  background: color-mix(in srgb, var(--reading) 90%, transparent);
  border-color: var(--hair2);
  backdrop-filter: blur(14px) saturate(.82);
  scrollbar-width: none;
}
body.zzk-vantage--knowledge .filt::-webkit-scrollbar { display: none; }
body.zzk-vantage--knowledge .chip {
  min-height: 31px;
  padding: 6px 11px;
  border-color: transparent;
  color: var(--faint);
}
body.zzk-vantage--knowledge .chip.on {
  color: var(--ink);
  border-bottom-color: var(--acc);
  background: color-mix(in srgb, var(--reading-strong) 62%, transparent);
}
body.zzk-vantage--knowledge .stage {
  top: calc(var(--nav-h) + 90px);
  scrollbar-color: var(--acc) transparent;
  scrollbar-width: thin;
}
body.zzk-vantage--knowledge .panel { top: calc(var(--nav-h) + 90px); }
body.zzk-vantage--knowledge .focuschip { top: calc(var(--nav-h) + 96px); }
body.zzk-vantage--knowledge .heads,
body.zzk-vantage--knowledge .xaxis {
  background: color-mix(in srgb, var(--reading-strong) 94%, transparent);
  backdrop-filter: blur(14px) saturate(.8);
}
body.zzk-vantage--knowledge .ev,
body.zzk-vantage--knowledge .hev { background: var(--reading); }
body.zzk-vantage--knowledge .ev:hover,
body.zzk-vantage--knowledge .hev:hover { background: var(--reading-strong); }
body.zzk-vantage--knowledge .ev {
  height: 110px;
  overflow: hidden;
}
body.zzk-vantage--knowledge .ev .mn,
body.zzk-vantage--knowledge .hev .mn {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.zzk-vantage--knowledge .ev .sn,
body.zzk-vantage--knowledge .hev .sn {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.zzk-vantage--knowledge .hev { height: 88px; }
body.zzk-vantage--knowledge .hint {
  bottom: 12px;
  background: color-mix(in srgb, var(--reading-strong) 88%, transparent);
  border-color: var(--hair2);
  backdrop-filter: blur(12px);
}

/* Lineage is an editorial register with two wide instruments. Keep the page
   quiet; put navigation aids beside the instruments instead of another bar. */
body.zzk-vantage--lineage .wrap {
  max-width: 1280px;
  padding: 42px var(--page-gutter) 110px;
}
body.zzk-vantage--lineage section { margin-bottom: clamp(58px, 7vw, 92px); }
body.zzk-vantage--lineage h2 {
  margin-bottom: 8px;
  font-size: clamp(1.15rem, 1vw + .9rem, 1.6rem);
  font-weight: 500;
  letter-spacing: .14em;
}
body.zzk-vantage--lineage .h2sub { margin-bottom: 24px; }
body.zzk-vantage--lineage .stagebox,
body.zzk-vantage--lineage .gitbox {
  position: relative;
  background: var(--reading);
  border-color: var(--hair);
  scrollbar-color: var(--acc) transparent;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
body.zzk-vantage--lineage .node rect { fill: var(--reading-strong); }
body.zzk-vantage--lineage .detail,
body.zzk-vantage--lineage .tier { background: var(--reading-strong); }
body.zzk-vantage--lineage .map-index {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  color: var(--faint);
  font: .62rem/1 var(--mono);
  letter-spacing: .16em;
}
body.zzk-vantage--lineage .map-index > span {
  margin-right: 14px;
  text-transform: uppercase;
}
body.zzk-vantage--lineage .map-index button {
  min-width: 42px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hair2);
  border-left: 0;
  background: transparent;
  color: var(--faint);
  font: .68rem/1 var(--mincho);
  cursor: pointer;
}
body.zzk-vantage--lineage .map-index button:first-of-type { border-left: 1px solid var(--hair2); }
body.zzk-vantage--lineage .map-index button.on {
  color: var(--acc);
  border-bottom-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 7%, transparent);
}
body.zzk-vantage--lineage .map-index small {
  margin-left: auto;
  color: var(--faint);
  font: .56rem/1.3 var(--mono);
  letter-spacing: .12em;
}
body.zzk-vantage--lineage .scroll-guide {
  margin: -10px 0 9px;
  color: var(--faint);
  font: .58rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-align: right;
}
body.zzk-vantage--lineage .scroll-guide::after { content: "  →"; color: var(--acc); }
body.zzk-vantage--lineage .detail {
  margin-top: 0;
  border-top: 0;
  padding: clamp(18px, 3vw, 30px);
}
body.zzk-vantage--lineage .governance-rule {
  margin-top: 24px;
  border-block: 1px solid var(--hair);
  background: color-mix(in srgb, var(--reading) 82%, transparent);
}
body.zzk-vantage--lineage .governance-rule__head {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair2);
}
body.zzk-vantage--lineage .governance-rule__head span,
body.zzk-vantage--lineage .governance-rule__grid b {
  color: var(--acc);
  font: .6rem/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
body.zzk-vantage--lineage .governance-rule__head p {
  max-width: 50rem;
  font: 1.02rem/1.8 var(--mincho);
  letter-spacing: .04em;
}
body.zzk-vantage--lineage .governance-rule__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.zzk-vantage--lineage .governance-rule__grid > div {
  min-width: 0;
  padding: 20px 18px 22px;
  border-right: 1px solid var(--hair2);
}
body.zzk-vantage--lineage .governance-rule__grid > div:first-child { padding-left: 0; }
body.zzk-vantage--lineage .governance-rule__grid > div:last-child { border-right: 0; padding-right: 0; }
body.zzk-vantage--lineage .governance-rule__grid strong {
  display: block;
  margin: 9px 0 7px;
  font: .9rem/1.4 var(--mincho);
  letter-spacing: .06em;
}
body.zzk-vantage--lineage .governance-rule__grid p,
body.zzk-vantage--lineage .governance-rule__foot {
  color: var(--dim);
  font-size: .76rem;
  line-height: 1.8;
}
body.zzk-vantage--lineage .governance-rule__foot {
  padding: 14px 0 17px;
  border-top: 1px solid var(--hair2);
}
body.zzk-vantage--lineage .tiers { gap: 0; border-block: 1px solid var(--hair); }
body.zzk-vantage--lineage .tier { border: 0; border-right: 1px solid var(--hair2); padding: 22px; }
body.zzk-vantage--lineage .tier:first-child { padding-left: 0; }
body.zzk-vantage--lineage .tier:last-child { border-right: 0; padding-right: 0; }

@media (max-width: 760px) {
  body.zzk-vantage--lineage .wrap { padding: 28px 16px 86px; }
  body.zzk-vantage--lineage section { margin-bottom: 60px; }
  body.zzk-vantage--lineage .map-index {
    position: sticky;
    top: var(--nav-h);
    left: 0;
    z-index: 10;
    margin-inline: -16px;
    padding: 8px 16px;
    background: var(--reading-strong);
    scroll-margin-top: calc(var(--nav-h) + 8px);
  }
  body.zzk-vantage--lineage .map-index small { display: none; }
  body.zzk-vantage--lineage .stagebox,
  body.zzk-vantage--lineage .gitbox { margin-inline: -16px; border-inline: 0; }
  body.zzk-vantage--lineage .detail { margin-inline: -16px; }
  body.zzk-vantage--lineage .governance-rule__head { grid-template-columns: 1fr; gap: 8px; }
  body.zzk-vantage--lineage .governance-rule__grid { grid-template-columns: 1fr; }
  body.zzk-vantage--lineage .governance-rule__grid > div,
  body.zzk-vantage--lineage .governance-rule__grid > div:first-child,
  body.zzk-vantage--lineage .governance-rule__grid > div:last-child {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--hair2);
  }
  body.zzk-vantage--lineage .tiers { grid-template-columns: 1fr; }
  body.zzk-vantage--lineage .tier,
  body.zzk-vantage--lineage .tier:first-child,
  body.zzk-vantage--lineage .tier:last-child {
    padding: 19px 0;
    border-right: 0;
    border-bottom: 1px solid var(--hair2);
  }
  body.zzk-vantage--lineage .scroll-guide { text-align: left; }
}

@media (max-width: 760px) {
  body.zzk-vantage--knowledge .bar {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 12px;
    scrollbar-width: none;
  }
  body.zzk-vantage--knowledge .bar::-webkit-scrollbar { display: none; }
  body.zzk-vantage--knowledge .ctrl { flex: 0 0 max-content; }
  body.zzk-vantage--knowledge .filt { padding-inline: 12px; }
  body.zzk-vantage--knowledge .hint { display: none; }
}

@media (max-width: 520px) {
  body.zzk-vantage--knowledge .bar { min-height: 44px; height:44px; padding-inline: 8px; }
  body.zzk-vantage--knowledge .ctrl { gap: 4px; }
  body.zzk-vantage--knowledge .seg button { min-height: 30px; padding-inline: 8px; }
  body.zzk-vantage--knowledge .zoom span { min-width: 52px; padding-inline: 6px; }
  body.zzk-vantage--knowledge .tog { width: 31px; min-width:31px; min-height:31px; padding:0; justify-content:center; }
  body.zzk-vantage--knowledge .tog .tog-label { display:none; }
}

body.zzk-portal .panel,
body.zzk-portal #obspop .obscard {
  background: var(--reading-strong);
  border-color: var(--hair);
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(20px) saturate(.88);
}

body.zzk-portal button,
body.zzk-portal a,
body.zzk-portal [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

body.zzk-portal :where(button, .atlas-node, .detail-link, .rchip):active {
  transform: scale(.98);
  transition: transform 100ms ease-out;
}

.portal-observation-frame {
  display: grid;
  gap: 7px;
  margin: 0 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--accline);
}

.portal-observation-frame b {
  color: var(--acc);
  font: 9px/1.5 var(--mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.portal-observation-frame span {
  max-width: 42ch;
  color: var(--dim);
  font: 13px/1.75 var(--mincho);
  letter-spacing: .03em;
}

body.zzk-portal button:focus-visible,
body.zzk-portal a:focus-visible,
body.zzk-portal [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* The atmosphere is a world field, not page decoration. */
body.zzk-portal #katmos {
  opacity: var(--atmos-opacity, .38);
  transition: opacity .8s var(--ease-world);
}

body.zzk-page--immersive { --atmos-opacity: .66; }
body.zzk-page--editorial { --atmos-opacity: .28; }
body.zzk-page--tool { --atmos-opacity: .2; }
body.zzk-page--data,
body.zzk-page--report { --atmos-opacity: .14; }

body.zzk-page--data #katmos .ridge,
body.zzk-page--report #katmos .ridge {
  opacity: .32;
  height: 17vh;
  min-height: 110px;
}

body.zzk-page--data #katmos .stars,
body.zzk-page--report #katmos .stars {
  opacity: .46;
}

:root[data-day="1"] body.zzk-page--data #katmos .stars,
:root[data-day="1"] body.zzk-page--report #katmos .stars {
  opacity: .14;
}

/* Persistent lens label. It names the observation, not the site. */
.portal-vantage {
  position: fixed;
  left: 13px;
  bottom: 18px;
  z-index: 19;
  display: grid;
  gap: 5px;
  max-width: min(25rem, 52vw);
  pointer-events: none;
  font-family: var(--mono);
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--void), 0 1px 4px var(--void);
}

.portal-vantage .pv-code {
  color: var(--acc);
  font-size: .58rem;
  letter-spacing: .24em;
}

.portal-vantage .pv-name {
  color: var(--dim);
  font-size: .65rem;
  letter-spacing: .16em;
}

.portal-vantage .pv-world {
  color: var(--faint);
  font-size: .56rem;
  letter-spacing: .12em;
}

@media (max-width: 760px) {
  body.zzk-portal .top { padding-inline: 12px; }
  body.zzk-portal .zsub { padding-inline: 16px; }
  .portal-vantage { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.zzk-portal,
  body.zzk-portal #katmos { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body.zzk-portal .nav .menu,
  body.zzk-vantage--knowledge .bar,
  body.zzk-vantage--knowledge .filt,
  body.zzk-portal .panel,
  body.zzk-portal #obspop .obscard {
    background: var(--reading-strong);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.zzk-portal .nav .menu,
  body.zzk-portal .panel,
  body.zzk-portal #obspop .obscard {
    border-color: var(--ink);
  }
}