/* ASMODEVS palette and type, shared with Alchemy */

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chakra-petch-400.woff2") format("woff2");
}

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-600.woff2") format("woff2");
}

:root {
  --bg: #070405;
  --panel: rgba(16, 9, 10, 0.9);
  --line: #2a1416;
  --line-strong: #4a2226;
  --text: #e8d4d0;
  --text-muted: #8e6f6b;
  --red: #ff4034;
  --red-deep: #b00e16;
  --ghost-dark: #6c060e;
  --ghost-pink: #ff3460;
  /* Cut corners, like the demo's buttons */
  --cut: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --cut-sm: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  /* Distance from the screen edges, clear of the iPhone notch, rounded corners and home indicator */
  --gutter: 16px;
  --top: max(var(--gutter), env(safe-area-inset-top));
  --right: max(var(--gutter), env(safe-area-inset-right));
  --bottom: max(var(--gutter), env(safe-area-inset-bottom));
  --left: max(var(--gutter), env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  /* No rubber-band scrolling, double-tap zoom, tap flash or long-press text selection on iOS */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input { -webkit-user-select: text; user-select: text; }

/* Help for the kind of pointer in use (dl.… outranks .view-help's display: grid) */
.for-touch, dl.for-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .for-mouse, dl.for-mouse { display: none; }
  .for-touch { display: revert; }
  dl.for-touch { display: grid; }
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

::selection { background: var(--red-deep); color: var(--text); }

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

/* Shared panel chrome */

.view, .atlas, .layers {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red-deep);
  border-radius: 0;
  backdrop-filter: blur(8px);
  z-index: 10;
}

.view-title, .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The diamond from the demo's slider thumb */
.view-title::before, .panel-title::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
}

.pt-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pt-toggle:hover { background: var(--red-deep); border-color: var(--red-deep); }

.action-button {
  padding: 5px 10px;
  border: 0;
  background: var(--red);
  color: var(--bg);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--cut-sm);
}
.action-button:hover { background: #ff5a4f; }
.action-button:active { transform: translateY(1px); }
.action-button.is-ghost { background: var(--line-strong); color: var(--text); }
.action-button.is-ghost:hover { background: var(--red-deep); }
.action-button.is-ghost[aria-pressed="true"] { background: var(--red-deep); }

/* Viewer */

.viewer {
  position: fixed;
  inset: 0;
}

.viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.viewer-tooltip {
  position: absolute;
  padding: 4px 9px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.viewer-tooltip[hidden] { display: none; }

/* Loading / error message, centred over the viewer */

.status {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  z-index: 20;
}

.status.is-error { color: var(--text); border-left-color: var(--red); text-transform: none; letter-spacing: 0; }

/* View panel (bottom left) */

.view {
  position: fixed;
  left: var(--left);
  bottom: var(--bottom);
  width: min(300px, calc(100vw - 32px));
  padding: 10px 12px;
}

.view-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.view-actions { display: flex; align-items: center; gap: 6px; }
.view.is-collapsed { width: auto; }
.view.is-collapsed .view-body { display: none; }

.view-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.view-help dt { color: var(--text-muted); white-space: nowrap; }
.view-help dd { margin: 0; color: var(--text); }

.view-help kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

.view-note { margin: 8px 0 0; color: var(--text-muted); font-size: 10.5px; }

/* Atlas (top left) */

.atlas {
  position: fixed;
  top: var(--top);
  left: var(--left);
  width: min(280px, calc(100vw - 32px));
}

.atlas.is-collapsed { width: auto; }
.atlas.is-collapsed .atlas-body { display: none; }

.atlas-body { padding: 0 10px 10px; border-top: 1px solid var(--line); }

.atlas-search {
  width: 100%;
  margin: 10px 0 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.atlas-search::placeholder { color: var(--text-muted); }
.atlas-search:focus { border-color: var(--red); outline: none; }

.atlas-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(46vh, 420px);
  overflow: auto;
}

.atlas-item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.atlas-item:hover, .atlas-item:focus-visible { background: var(--line); border-left-color: var(--c); outline: none; }

.atlas-meta { color: var(--text-muted); font-size: 11px; }
/* Whole organs, listed first */
.atlas-item.is-organ { border-left-width: 3px; background: rgba(176, 14, 22, 0.08); }
.atlas-item.is-organ .atlas-name { font-weight: 600; }
.atlas-empty { padding: 6px 8px; color: var(--text-muted); font-size: 12px; }
.atlas-count, .atlas-source { margin: 6px 0 0; color: var(--text-muted); font-size: 10.5px; }
.atlas-source a { color: var(--text-muted); text-decoration-color: var(--red-deep); }
.atlas-source a:hover { color: var(--red); }

/* Layers (top right) */

.layers {
  position: fixed;
  top: var(--top);
  right: var(--right);
  width: min(300px, calc(100vw - 32px));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.layers.is-collapsed { width: auto; }
.layers.is-collapsed .layers-body { display: none; }

.layers-body { padding: 8px 12px 12px; border-top: 1px solid var(--line); }

.layers-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.layer {
  display: grid;
  grid-template-columns: 1fr 96px 36px;
  align-items: center;
  gap: 10px;
}

.layer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.layer-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--c);
  background: var(--c);
  clip-path: var(--cut-sm);
}

.layer-toggle:hover .layer-name { color: var(--red); }
.layer.is-hidden .layer-swatch { background: transparent; }
.layer.is-hidden .layer-name, .layer.is-hidden .layer-value { color: var(--text-muted); }

.layer-value { color: var(--text); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

/* Slider with the demo's diamond thumb */
.layer-opacity {
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}
.layer-opacity::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.layer-opacity::-moz-range-track { height: 2px; background: var(--line-strong); }
.layer-opacity::-moz-range-progress { height: 2px; background: var(--c); }
.layer-opacity::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 0;
  background: var(--red);
  transform: rotate(45deg);
  appearance: none;
}
.layer-opacity::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 0;
  background: var(--red);
  transform: rotate(45deg);
}
.layer.is-hidden .layer-opacity { opacity: 0.4; }

.layers-presets {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Cut corners (--cut-sm) with the border closed across them: a gradient draws each 5px diagonal in --edge. */
.layers-presets button {
  --edge: var(--line-strong);
  --fill: transparent;
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--edge);
  background:
    linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px))
      top left / 5px 5px no-repeat border-box,
    linear-gradient(to top left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px))
      bottom right / 5px 5px no-repeat border-box,
    var(--fill);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--cut-sm);
}
.layers-presets button:hover { --edge: var(--red); --fill: rgba(176, 14, 22, 0.12); }
.layers-presets button:focus-visible { outline: none; --edge: var(--red); --fill: rgba(255, 64, 52, 0.18); }

/* Body and language switches (top centre) */

/* Atlas, Layers and the switches: on their own on wide screens, stacked in the top right corner on narrow ones */
.top-panels { display: contents; }

.top-switches {
  position: fixed;
  top: var(--top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.switch {
  display: flex;
  border: 1px solid var(--line);
  border-top: 2px solid var(--red-deep);
  background: var(--panel);
  backdrop-filter: blur(8px);
}

.switch button {
  min-width: 38px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.switch button + button { border-left: 1px solid var(--line); }
.body-icon { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.switch button:hover { color: var(--text); }
.switch button[aria-pressed="true"] { background: var(--red); color: var(--bg); }


/* Selected structure (bottom right) */

.structure-card {
  position: fixed;
  right: var(--right);
  bottom: var(--bottom);
  display: grid;
  gap: 4px;
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--top) - var(--bottom) - 60px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--c);
  background:
    linear-gradient(to bottom right, transparent 50%, var(--c) 50%, var(--c) calc(50% + 1px), transparent calc(50% + 1px))
      top left / 8px 8px no-repeat border-box,
    linear-gradient(to top left, transparent 50%, var(--c) 50%, var(--c) calc(50% + 1px), transparent calc(50% + 1px))
      bottom right / 8px 8px no-repeat border-box,
    color-mix(in srgb, var(--c) 10%, var(--panel));
  backdrop-filter: blur(8px);
  clip-path: var(--cut);
  z-index: 10;
}

.structure-card[hidden] { display: none; }

.structure-system {
  color: var(--c);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.structure-name { font-size: 17px; font-weight: 600; }
.structure-fma { color: var(--text-muted); font-size: 11px; letter-spacing: 0.06em; }
.structure-actions { display: flex; gap: 6px; margin-top: 6px; }

.structure-description, .structure-fact { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; -webkit-user-select: text; user-select: text; }
.structure-description { color: var(--text); }
.structure-fact {
  padding: 6px 8px;
  border-left: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--text);
}
.structure-fact strong { color: var(--c); font-weight: 600; letter-spacing: 0.04em; }
.structure-source { margin: 0; color: var(--text-muted); font-size: 10.5px; }
.structure-source a { color: var(--text-muted); text-decoration-color: var(--red-deep); }
.structure-source a:hover { color: var(--red); }
.structure-description[hidden], .structure-fact[hidden], .structure-source[hidden] { display: none; }

/* Brand: ASMODEVS logo with the demo's ghost glitch */

.brand {
  position: fixed;
  left: 50%;
  bottom: var(--bottom);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 10;
}

.brand-logo { display: block; width: 64px; height: auto; }
.brand:hover .brand-logo, .brand:focus-visible .brand-logo { animation: brand-glitch-burst 0.42s steps(1, end) 1; }

.brand-text { display: grid; gap: 2px; line-height: 1; }
.brand-name { color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0.24em; }
.brand:hover .brand-by { color: var(--red); }

/* Only on hover, so it doesn't distract. Ghosts sit left (maroon) and right (pink), as in the demo's glitch stack */
@keyframes brand-glitch-burst {
  0%   { filter: drop-shadow(-3px 0 var(--ghost-dark)) drop-shadow(3px 0 var(--ghost-pink)); transform: translateX(2px); }
  20%  { filter: none; transform: none; }
  35%  { filter: drop-shadow(-4px 0 var(--ghost-dark)) drop-shadow(2px 0 var(--ghost-pink)); transform: translateX(-3px) skewX(-8deg); }
  60%  { filter: drop-shadow(-2px 0 var(--ghost-dark)) drop-shadow(4px 0 var(--ghost-pink)); transform: translateX(1px); }
  80%, 100% { filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-logo, .brand:focus-visible .brand-logo { animation: none; }
}

/* Narrow screens: the top panels would overlap, so Layers and Atlas stack in the top right corner and the body and
   language switches in the top left one, and only one panel is open at a time. Keep the breakpoint in sync with
   SMALL_SCREEN in panel.js (expanding a panel there collapses the others). */
@media (max-width: 760px) {
  :root { --gutter: 12px; }

  .brand { display: none; }

  /* Stops above the collapsed View bar */
  .top-panels {
    position: fixed;
    top: var(--top);
    right: var(--right);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-height: calc(100dvh - var(--top) - var(--bottom) - 58px);
  }
  .top-panels .atlas, .top-panels .layers { position: static; }
  .top-panels > * { flex-shrink: 0; }
  .top-panels .layers { order: 1; }
  .top-panels .atlas { order: 2; }
  /* On short screens the open Atlas gives up height (its list scrolls) so Layers stays above the View bar */
  .top-panels .atlas:not(.is-collapsed) { display: flex; flex-direction: column; flex-shrink: 1; min-height: 0; }
  .top-panels .atlas:not(.is-collapsed) .atlas-body { display: flex; flex-direction: column; min-height: 0; }
  .top-panels .atlas-list { flex-shrink: 1; min-height: 80px; }
  /* Open panels stop short of the switches column (72px wide) */
  .top-panels .atlas:not(.is-collapsed), .top-panels .layers:not(.is-collapsed) {
    width: min(300px, calc(100vw - var(--left) - var(--right) - 72px - 8px));
  }

  /* Body above language, both the same width: two 35px buttons each, Mars and Venus instead of the words */
  .top-switches {
    left: var(--left);
    transform: none;
    flex-direction: column;
  }
  .switch button { display: flex; align-items: center; justify-content: center; width: 35px; min-width: 0; height: 30px; padding: 0; font-size: 11px; }
  .body-label { display: none; }
  .body-icon { display: block; }

  .view:not(.is-collapsed) {
    left: var(--left);
    right: var(--right);
    width: auto;
    z-index: 15;
  }

  /* The selected structure sits above the collapsed View bar */
  .structure-card {
    left: var(--left);
    width: auto;
    bottom: calc(var(--bottom) + 58px);
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 12px;
  }
  .structure-card > * { grid-column: 1 / -1; }
  .structure-card .structure-system, .structure-card .structure-name, .structure-card .structure-fma { grid-column: 1; }
  .structure-card .structure-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-direction: column; }
  /* Keep the body in view: the description is cut to three lines on phones */
  .structure-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .structure-card { max-height: 50dvh; }
  .structure-name { font-size: 15px; }
}

/* Touch screens: larger targets, and 16px text in the search box so iOS doesn't zoom in when it is focused */
@media (pointer: coarse) {
  .pt-toggle { width: 32px; height: 32px; }
  .action-button { padding: 8px 12px; }
  .atlas-search { font-size: 16px; }
  .atlas-item { padding: 8px; }
  .layer { grid-template-columns: 1fr 110px 38px; }
  .layer-toggle { padding: 8px 0; }
  .layer-opacity { height: 28px; }
  .layer-opacity::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7px; }
  .layer-opacity::-moz-range-thumb { width: 16px; height: 16px; }
  .layers-presets button { padding: 8px; }
}