/* zn-cursor.css — the cursor companion on the ported pages (pairs with /sqs/zn-cursor.js).
   The same dot + label the React pages draw (src/styles.css + src/v5-styles.css), on the
   page's own tokens: the dot in the accent, the label ink-on-paper, the nav variant
   paper-on-ink with a small accent point. Fine pointers only. */
.cursor-dot, .cursor-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-dot {
    display: block; position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
    margin-left: -5px; margin-top: -5px; background: var(--v4-accent, #C68458); opacity: 0;
    pointer-events: none; z-index: 1000; mix-blend-mode: difference;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 20px rgba(255, 255, 255, 0.18);
    transition: width .25s cubic-bezier(.22, .61, .36, 1), height .25s cubic-bezier(.22, .61, .36, 1),
                margin .25s cubic-bezier(.22, .61, .36, 1), opacity .25s, background .25s;
  }
  .cursor-dot.is-seen { opacity: .85; }
  .cursor-dot.on {
    width: 48px; height: 48px; margin-left: -24px; margin-top: -24px;
    background: transparent; border: 1px solid var(--v4-accent, #C68458);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0), 0 0 28px rgba(255, 255, 255, 0.22);
  }
  .cursor-dot.is-nav { background: var(--v4-ink, #0E0F0E) !important; }
  .cursor-label {
    display: block; position: fixed; left: 0; top: 0;
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace); font-weight: 500;
    font-size: var(--zn-label, 11px); letter-spacing: var(--zn-label-track, .14em); text-transform: uppercase;
    background: var(--v4-ink, #0E0F0E); color: var(--v4-paper, #F2EEE6);
    padding: 6px 10px; border-radius: 2px; white-space: nowrap;
    pointer-events: none; z-index: 1001; opacity: 0; transform: translate(0, 0) scale(.9);
    transition: opacity .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
  }
  .cursor-label.on { opacity: 1; }
  .cursor-label.is-nav {
    background: var(--v4-paper, #F2EEE6) !important; color: var(--v4-ink, #0E0F0E) !important;
    border: 1px solid var(--v4-ink, #0E0F0E); padding-left: 20px !important;
  }
  .cursor-label.is-nav::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; border-radius: 50%;
    background: var(--v4-accent, #C68458); transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-label { transition: none; }
}