/* ============================================================
   The stylus — an invisible hand that annotates the home page.
   Appearance only; assets/stylus.js decides what gets drawn and
   when. Kept in its own file so it can be dropped onto a page
   (or left off one) without touching styles.css.
   ============================================================ */

/* The panel becomes the stylus's sheet. The overlay is sized to it and
   scrolls with it — the marks are ON the document, not on the glass. */
.panel.has-stylus { position: relative; }

.stylus {
  position: absolute;
  inset: 0;
  z-index: 2;              /* over the cards, under the fixed grain/veil */
  pointer-events: none;
  overflow: visible;
}
.stylus__ink {
  fill: none;
  stroke: var(--stylus-ink, #3A3934);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stylus__hand {
  font-family: var(--body);
  font-style: italic;
  fill: var(--stylus-ink, #3A3934);
}

/* The board's cells are real buttons: they take focus and a keyboard
   press, and trail.js already declines to scrub a click on a button. */
.stylus__cell {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.stylus__cell:disabled { cursor: default; }
/* A hard state change on hover, never a fade — the panel can't ease. */
.stylus__cell:not(:disabled):hover { background: rgba(44, 43, 39, 0.06); }
.stylus__cell:focus-visible { outline: 1.5px solid var(--signal); outline-offset: -3px; }

/* A local region refresh for the board. The same two layers trail.js
   uses for a click, so reduced motion hides them in the same place. */
.stylus-flash { position: fixed; }