/* index-v1a/logo — the SN.S logo layer (a copy of ball-v4b's styles, with
   its classes prefixed sns- so they don't clash with the Index page's). The
   page loads Cygnito Mono. */

:root {
  --sns-u: 1px;     /* one logo unit, in CSS px (set by main.js) */
}

/* A full-screen layer that never takes the pointer itself: main.js hit-tests
   the logo and lets everything else through to the page. */
.sns-logo {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
html.sns-over, html.sns-over * { cursor: pointer; }
html.sns-dragging, html.sns-dragging * { cursor: grabbing; }

.sns-logo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.sns-menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A page's name, written along its tube (placed and turned by main.js). */
.sns-page {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 50%;
  color: #929497; /* the logo's grey */
  text-decoration: none;
  font: calc(12.5 * var(--sns-u)) / 1 'Cygnito Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  outline: none;
}

/* The dot, stretched into a silver bar with the filters. */
.sns-filters {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(19 * var(--sns-u));
  overflow: hidden;
  border-radius: calc(2 * var(--sns-u));
  background-image: linear-gradient(126.53592591910896deg, #fff 0%, #929497 23.478%, #fff 43.478%, #929497 66.957%, #fff 86.957%);
  background-repeat: no-repeat;
  background-color: #fff;
  pointer-events: auto;
}
.sns-bar {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--sns-u));
  height: 100%;
  padding: 0 calc(8 * var(--sns-u));
  font: calc(11 * var(--sns-u)) / 1 'Cygnito Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: #929497;
  white-space: nowrap;
}
.sns-chip {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sns-chip:first-child { cursor: default; }
button.sns-chip:hover { color: #6f7073; }
button.sns-chip[aria-pressed='true'] { color: #3f4042; }