/* The hands and the marks they leave. Both layers lie over the whole page in page coordinates, so they scroll with
   it, and neither is ever in the way of what lies under it. */

.hands,
.marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.marks {
  z-index: 998;
}

.hands {
  z-index: 1000;
}

/* Pointers. */

.pointer {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

/* Paper casts a soft, close shadow: lifted a hair off the page, not floating over it. */
.pointer-glyph {
  position: absolute;
  transform-origin: 0 0;
  filter: drop-shadow(0 1.4px 1.1px rgb(40 30 20 / 0.24)) drop-shadow(0 0 0.4px rgb(40 30 20 / 0.3));
}

.pointer svg {
  position: absolute;
  left: -24px;
  top: -24px;
  overflow: visible;
}

/* The name: a slip of paper with a band of the hand's colour, stuck on a little askew. */
.pointer-tag {
  position: absolute;
  left: 15px;
  top: 21px;
  padding: 2px 7px 3px 6px;
  border-left: 3px solid var(--ink);
  border-radius: 1px 2px 2px 1px;
  background: #fffdf8;
  color: color-mix(in oklab, var(--ink) 80%, #000);
  box-shadow:
    0 1px 2px rgb(40 30 20 / 0.18),
    0 0 0 0.5px rgb(40 30 20 / 0.1);
  font: 400 10.5px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  rotate: var(--tilt);
  translate: -3px -4px;
  scale: 0.92;
  transform-origin: 0 0;
  transition:
    opacity 140ms ease,
    translate 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pointer.is-tagged .pointer-tag {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Frames: a selection, with its four handles and a badge of its size. */

.frame {
  --select: #0d99ff;
  position: absolute;
  box-shadow: inset 0 0 0 1px var(--select);
}

.frame i {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--select);
}

.frame .tl { left: 0; top: 0; }
.frame .tr { right: 0; top: 0; margin-right: -3.5px; }
.frame .bl { left: 0; bottom: 0; margin-bottom: -3.5px; }
.frame .br { right: 0; bottom: 0; margin: 0 -3.5px -3.5px 0; }

.frame-badge {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 7px;
  padding: 1px 5px 2px;
  border-radius: 3px;
  background: var(--select);
  color: #fff;
  font: 400 10px/1.3 var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}

.frame.is-fill {
  background: color-mix(in srgb, var(--ink, #1b1b19) 8%, transparent);
}

.frame.is-conflict {
  --select: #f24822;
  background: rgb(242 72 34 / 0.06);
}

.frame.is-bare i,
.frame.is-bare .frame-badge {
  display: none;
}

.frame.is-leaving {
  opacity: 0;
  transition: opacity 240ms ease;
}

/* Guides and the lines that flash where edges align. */

.guide {
  position: absolute;
  width: 1px;
  margin-left: -0.5px;
  background: rgb(242 72 34 / 0.6);
  transition: opacity 600ms ease;
}

.guide.is-across {
  width: auto;
  height: 1px;
  margin: -0.5px 0 0;
}

/* A guide glows a little, as a line of light on a screen does. */
.guide {
  box-shadow: 0 0 3px rgb(242 72 34 / 0.35);
}

.guide.is-leaving {
  opacity: 0;
}

.extension {
  position: absolute;
  background: repeating-linear-gradient(to bottom, #0d99ff 0 3px, transparent 3px 6px);
}

.extension.is-across {
  background: repeating-linear-gradient(to right, #0d99ff 0 3px, transparent 3px 6px);
}

.align {
  position: absolute;
  background: #0d99ff;
  animation: flash 900ms ease forwards;
}

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Rulers, along the top and left of the screen while anything is being made. */

.ruler {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.ruler-top {
  width: 100vw;
  height: 20px;
}

.ruler-left {
  width: 20px;
  height: 100vh;
}

.is-making .ruler {
  opacity: 0.94;
}

/* What the crew does to the page's own elements as it makes them. */

.is-unbuilt {
  visibility: hidden;
}

.is-arriving {
  animation: arrive 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes arrive {
  from {
    opacity: 0;
  }
}

.type-rest {
  color: transparent;
}

.type-caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin: 0 -1px;
  vertical-align: -0.14em;
  border-radius: 1px;
}

.is-typing > .type-caret {
  display: inline-block;
}

.is-selected {
  background: rgb(13 153 255 / 0.22);
}