/* ============================================================
   sketch.css — the construction drawing behind the page.

   A notebook margin, not a graphic. Two long straight axes lean down
   the page, and everything else hangs off them: a circle at each
   station, measurement ticks across the axis, dotted guides running
   out to the page edge, and triangles tying the two axes together.

   This is the original composition, restored after two replacements
   were tried and rejected. Its spacing and convergence are being
   reviewed from screenshots; nothing here should be tuned ahead of
   that.

   The geometry is drawn by scripts/sketch.js at the page's own pixel
   size. This file is where it is coloured, layered and masked, and
   where the control that pauses it lives. Weights come from
   tokens.css, so the drawing follows Light and Dark like everything
   else.
   ============================================================ */

/* z-index 0, and first in the body, so the drawing paints above the
   page colour and above any background a page paints over it (the
   reading room has one, and at -1 it swallowed the drawing there)
   while sitting behind every positioned element that follows it.

   Layering is NOT what keeps a stroke off the copy — the mask is, and
   it has two parts. scripts/sketch.js punches every content box out of
   it and blurs those punches, so the drawing thins as it approaches
   text; underneath that it punches the same boxes and every rendered
   line of text solid, at full black, and that is the part which
   guarantees zero ink over anything a reader reads. The capsule nav is
   the one box with no punch at all: it is fixed, and it is an opaque
   surface, so it hides a mark behind it directly and nothing in the
   mask has to travel with the window. If a stroke is ever seen
   crossing a word, that is the mask to look at, not this. */
.sketch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sketch svg { display: block; }
.sketch path {
  fill: none;
  stroke: var(--sketch-line);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.sketch .sketch__guide {
  stroke: var(--sketch-guide);
  stroke-width: 1;
  stroke-dasharray: 1.5 7;
}
.sketch .sketch__dot { fill: var(--sketch-dot); stroke: none; }

/* Each mark fades in and out on its own slow cycle, so at any moment
   some are arriving while others are leaving. There used to be a second
   copy of the whole figure pinned underneath at this weight, which meant
   nothing could ever actually be absent; it is gone, and the token is
   kept because the weight it names is still the one to reach for if a
   resting layer is ever wanted again. */

/* a phone has less room for it, so the same drawing goes quieter */
@media (max-width: 860px) {
  .sketch path { stroke: rgba(28, 24, 16, 0.14); }
  .sketch .sketch__guide { stroke: rgba(28, 24, 16, 0.1); }
  .sketch .sketch__dot { fill: rgba(28, 24, 16, 0.18); }
  html[data-mode="security"] .sketch path { stroke: rgba(238, 236, 230, 0.08); }
  html[data-mode="security"] .sketch .sketch__guide { stroke: rgba(238, 236, 230, 0.06); }
  html[data-mode="security"] .sketch .sketch__dot { fill: rgba(238, 236, 230, 0.1); }
}

/* ---- the control ------------------------------------------------
   Anything that moves on its own needs a way to stop it, and the
   drawing moves for a minute at a time. This is that switch and
   nothing else: it does not touch the sphere, which has its own
   motion rules and its own reasons.

   It ships hidden and scripts/sketch.js reveals it, so a page with no
   JavaScript — where nothing is animating in the first place — does
   not carry a dead control.

   It rides in the same sticky row as the appearance pill, hanging off
   that pill's right edge. It was in the bottom-left corner first, and
   that corner is not free: it landed on the CV's sticky pager status,
   on the opening characters of every line of an article, and on the
   copy of an open card. Absolute against .switch-dock rather than in
   its flow, so the pill keeps its own width and stays centred, and the
   row keeps its height and its --switch-room footprint.
   ----------------------------------------------------------------- */
.sketch-switch {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--panel-dim);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  transition: color var(--dur-breath) var(--ease-sand);
}
.sketch-switch:hover { color: var(--panel-text); }
.sketch-switch[hidden] { display: none; }

/* the mark itself: a small arc and its dot, drawn the way the ones
   behind the page are, so the control says what it controls */
.sketch-switch__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--panel-text);
}
.sketch-switch__state { color: var(--panel-strong); }

/* The label is the thing being controlled and the state is its value,
   which is what aria-pressed says too. Both are read, so a screen
   reader hears "Background lines, on, toggle button" rather than a
   verb it has to guess the object of.

   On a phone there is only room beside the pill for the mark itself, so
   the words go to the screen reader and nowhere else. They are still
   there, and still both of them: a 44px circle with no accessible name
   is not a smaller control, it is an unusable one. */
@media (max-width: 860px) {
  .sketch-switch__label,
  .sketch-switch__state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .sketch-switch {
    gap: 0;
    width: 44px;
    padding: 0;
    justify-content: center;
  }
}

html.no-motion .sketch-switch { transition: none; }