/* ==========================================================================
   Context-menu guard — connorlapping.io
   Added 2026-09-28.

   Replaces the browser context menu with an in-character message.

   HONEST SCOPE: this does not protect the source. By the time this file runs,
   the HTML, CSS and JS are already on the reader's machine, and Ctrl+U, DevTools
   or `curl /clp-chat.js` all read them straight off disk. What it does stop is
   the reflex: casual right-click-to-copy and the instinctive F12. Treat it as a
   speed bump, never as a security control.

   It is deliberately built NOT to be hostile. It yields to form fields, yields
   to Shift, yields to Escape, and never blocks text selection or Ctrl/Cmd+C. A
   guard that breaks pasting into a chat box or copying an address is worse than
   no guard at all.
   ========================================================================== */

.clp-guard {
  position: fixed;
  z-index: 2147483647;
  min-width: 244px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 16px 18px 15px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  color: var(--text);
  /* Same stack as clp-theme.css:18, quoted identically. text-rendering and
     -webkit-font-smoothing are inherited from body, so they are not repeated
     here — restating them risks the two drifting apart. */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  opacity: 0;
  transform: scale(.96) translateY(-4px);
  visibility: hidden;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  /* A guard must never introduce a scrollbar or a layout shift. */
  max-height: calc(100vh - 24px);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

.clp-guard.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.clp-guard__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.clp-guard__mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -.02em;
  color: var(--text);
}

.clp-guard__who {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.clp-guard__msg {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.clp-guard__msg b {
  color: var(--text);
  font-weight: 600;
}

.clp-guard__foot {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
}

.clp-guard__foot kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.4;
}

/* Elevation, matching the rest of the site: none in dark, soft in light. */
html.clp-light .clp-guard { box-shadow: var(--shadow-2); }

@media (prefers-reduced-motion: reduce) {
  .clp-guard { transition: none; transform: none; }
}

@media (pointer: coarse) {
  .clp-guard { min-width: min(280px, calc(100vw - 24px)); }
  .clp-guard__msg { font-size: 14px; }
}