/* The visitor page. It is held by somebody lying in a dark room under a piece
   whose whole point is that it is dim, so this page is a light source in that
   room and is treated as one: near-black throughout, no white anywhere, and
   nothing that flashes or transitions upward in brightness.

   The one exception is the rim pulse on the pad, and it is deliberate: a single
   hairline at four tenths of a desaturated teal, on a border that was already
   drawn. It is the only thing on the page that says the ceiling took a mark. */

* { box-sizing: border-box; }

/* Same reasoning as the operator page: the ring has to exist for anybody
   steering by keyboard, but the browser's default ring is the brightest thing
   either page could show, so it is redrawn one step above the 3:1 floor and no
   further. */
:focus-visible { outline: 2px solid #3a6f63; outline-offset: 2px; }

html, body {
  height: 100%;
  margin: 0;
  background: #05060a;
  color: #5d6472;
  font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* A drag on the pad is a brush stroke, never a scroll, a zoom or a
     pull-to-refresh. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

/* ----------------------------------------------------------------- header */

header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

#you {
  display: flex;
  align-items: center;
  gap: 8px;
  /* A button, so it is tappable by keyboard and by screen reader as well as by
     thumb — which means undoing the parts of a button the platform draws for
     us, all of which are brighter than this page is allowed to be. */
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid #171b24;
  border-radius: 999px;
  padding: 7px 12px 7px 8px;
  background: #07090e;
  /* The pill sits next to a status line that can run to two lines on a narrow
     phone. It keeps its own text on one line and gives way instead. */
  flex: 0 1 auto;
  white-space: nowrap;
}

#you span { font-size: 12px; color: #4a5260; }

/* A fixed slot for the dot, so re-rolling the colour moves nothing: the pill's
   text would otherwise shift by whatever the new swatch measured. */
#dotwrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
}

#dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2f3542;
}

#status {
  margin-left: auto;
  font-size: 12px;
  color: #5d6472;
  text-align: right;
}

#status[data-state="waiting"] { color: #6c5a3a; }
#status[data-state="live"] { color: #5f8f80; }

/* -------------------------------------------------------------------- pad */

/* The space the pad is fitted into. It takes everything the header does not,
   from a basis of zero rather than of content: with `flex-basis: auto` the
   pad's own height feeds back into the box that decides the pad's height, and
   the two settle a pixel apart on every rotation. */
#stage {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
}

/* Sized in phone.js, not here, and in both orientations by the same arithmetic.
   The shape it has to take is the picture's shape, which arrives over the wire
   and can be a rectangle of any aspect — CSS can express "fit a box of ratio R
   into the space left over" only through a chain of aspect-ratio and max-width
   rules that quietly stops preserving the ratio the moment the other axis is
   the binding one. One line of arithmetic against the measured stage is both
   shorter and the same in portrait and landscape.

   Round by default, because that is what the page did before any ceiling said
   otherwise, and with no top: the composition has no "up" and people are lying
   underneath at every angle, so a pad with a right way up would be claiming an
   orientation the piece does not have. */
#pad {
  position: relative;
  margin: auto;
  border-radius: 50%;
  border: 1px solid #171b24;
  overflow: hidden;
  /* Slow on the way down, quick on the way up — see .took. */
  transition: border-color 400ms linear;
}

/* The picture is a rectangle tonight, so the pad is one. */
#pad.rect { border-radius: 18px; }

/* The ceiling took a batch. The rise is quick because it is an answer to a
   gesture and a slow one would land after the finger has moved on; the fall is
   slow so that it reads as a rim settling rather than a light blinking. A
   finger that keeps drawing re-triggers this faster than it decays, so the rim
   stays lit for as long as the ceiling keeps saying yes — which is the honest
   picture of what is happening, and quieter than a strobe at ten hertz. */
#pad.took {
  border-color: rgba(127, 212, 193, 0.4);
  transition: border-color 80ms linear;
}

#ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0 32px;
  color: #2f3542;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
  /* Only ever fades out. */
  transition: opacity 1.2s linear;
}

#hint.gone { opacity: 0; }

/* Said once, dimmer than the invitation above it: the pad is not a corner of
   the ceiling to be aimed with, it is the whole of it. */
#hint small {
  display: block;
  margin-top: 6px;
  letter-spacing: 0.04em;
  color: #262c38;
}

/* Under reduced motion the hint disappears instead of fading. The pad's rim
   keeps its slow fall on purpose: it is colour on a hairline that was already
   drawn, not movement, and cutting the decay would make the rim blink at
   whatever rate the ceiling accepts strokes — the one thing no part of this
   install is ever allowed to do. */
@media (prefers-reduced-motion: reduce) {
  #hint { transition: none; }
}