/* ============================================================
   pen-marks-v3.css — messier marks, rail-placed annotations,
   typed-with-glitches notes.

   Loaded AFTER base.css + notebook.css. Companion to pen-marks-v3.js.
   ============================================================ */

:root {
  /* tweakable mess level (1 = default; 0 = clean; 1.6 = scribbled) */
  --pm-mess: 1.15;
  /* how lively the typed annotation feels */
  --pm-typing-glitch: 0.7;
}

/* ── inline marks: anchor shell (same as v2 for compatibility) ── */
[data-pm] {
  position: relative;
  display: inline-block;
}
[data-pm].pm-shell--circle,
[data-pm].pm-shell--box,
[data-pm].pm-shell--bracket {
  padding: 1px 8px;
}
[data-pm].pm-shell--redact {
  color: var(--ink-3);
  opacity: 0.45;
}
.pm-svg-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.pm-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pm-svg .pm-stroke {
  /* inherits stroke from path attr — set per-stroke for variance */
}

/* doodles */
.pm-doodle-host {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.pm-doodle-host svg { display: block; overflow: visible; }
.pm-doodle-host[data-pm="doodle"] { width: 60px; height: 60px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="squiggle"]   { width: 80px; height: 40px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="cluster"]    { width: 60px; height: 50px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="tangle"]     { width: 70px; height: 60px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="scribble"]   { width: 80px; height: 60px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="overstrike"] { width: 60px; height: 60px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="tally"]      { width: 70px; height: 36px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="arrow"]      { width: 90px; height: 40px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="plot"]       { width: 100px; height: 60px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="bars"]       { width: 80px; height: 56px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="symbol"]     { width: 44px; height: 44px; }
.pm-doodle-host[data-pm="doodle"][data-pm-doodle="check"]      { width: 48px; height: 40px; }
.pm-doodle-host[data-pm="network"] {
  display: block; width: 100%; max-width: 280px; height: 160px;
}
.pm-doodle-host[data-pm-tilt]  { transform: rotate(var(--pm-tilt, -3deg)); }
.pm-doodle-host.tilt-1         { transform: rotate(-4deg); }
.pm-doodle-host.tilt-2         { transform: rotate(3deg); }
.pm-doodle-host.tilt-3         { transform: rotate(-1.5deg); }

/* ── annotation rail (the new "once and for all" system) ──────
   A body-level absolute layer that sits to the right of <main>.
   The JS measures anchor positions in document coords and places
   each note at its anchor's Y, collision-avoiding downward.
   Arrows draw on a separate body-level SVG so they bridge prose
   without pushing it.
   ───────────────────────────────────────────────────────────── */
.pm-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.pm-rail-arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.pm-rail-note {
  position: absolute;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--accent);
  pointer-events: auto;
  z-index: 3;
  /* slight off-axis tilt per-note, randomized inline by JS */
  transform-origin: left center;
  /* fade-in is driven by JS (inline opacity transitions). CSS doesn't set
     a baseline opacity — that caused the transition to never fire in some
     embedded preview contexts when the element had no prior computed style. */
  opacity: 1;
  transform: translateX(0);
}
.pm-rail-note.pm-rail-note--hidden {
  opacity: 0;
  transform: translateX(-4px);
}
.pm-rail-note .pm-rail-text {
  display: inline-block;
  /* caret comes from ::after when .pm-typing class is on */
}
.pm-rail-note.pm-typing .pm-rail-text::after {
  content: "▌";
  display: inline-block;
  margin-left: 1px;
  color: var(--accent);
  animation: pm-caret 0.7s steps(1) infinite;
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.95em;
}
@keyframes pm-caret { 50% { opacity: 0; } }

.pm-rail-note .pm-rail-by {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  opacity: 0.75;
}

/* inline fallback when no rail room (narrow viewport) */
.pm-rail-note.pm-rail-note--inline {
  position: relative;
  display: block;
  margin: 8px 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  max-width: 28ch;
  transform: rotate(-0.3deg);
}

/* compact rail note: used for short tag-style annotations (was "flag" in v2).
   Comes AFTER the .pm-rail-note--inline rule so its display: inline-block
   wins when both classes are present. */
.pm-rail-note--compact {
  font-size: 14.5px;
  line-height: 1.18;
}
.pm-rail-note.pm-rail-note--compact.pm-rail-note--inline {
  /* truly inline next to the anchor — small handwritten tag, no border bar */
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 0;
  border: none;
  font-size: 14px;
  vertical-align: baseline;
  max-width: none;
  white-space: nowrap;
  transform: rotate(-2deg);
}

/* small "flag" variant: a pinned tag-style annotation above an inline element */
.pm-flag {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 2px;
  font-family: "Caveat", cursive;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: auto;
  z-index: 3;
  opacity: 1;
}
.pm-flag.pm-rail-note--hidden { opacity: 0; transform: translateY(2px); }

/* connection-arc label (kept from v2 vocabulary) */
.pm-connect-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.pm-connect-label {
  position: absolute;
  font-family: "Caveat", cursive;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  background: var(--paper);
  padding: 0 4px;
  white-space: nowrap;
  transform: rotate(-2deg);
  pointer-events: none;
}

/* ── responsive: drop rail at small viewports ──────────────── */
@media (max-width: 1100px) {
  /* rail notes will be inserted inline by JS instead — see fallback class */
}

/* ── print ────────────────────────────────────────────────── */
@media print {
  .pm-svg, .pm-rail-note, .pm-flag, .pm-connect-wrap {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}