/* Sharing and output (stream S11b): share dialog, visitor page, export menu,
   comment threads and pins, access tokens. Mockups: design/panels.html
   (#comments, #share, #export) and design/editor-erd.html (visitor state).
   Uses the design tokens only, so light and dark follow the theme. */

/* ---------- shared bits (mockup-local classes in panels.html) ---------- */
.link-field { display: flex; gap: var(--space-2); }
.link-field .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); }
.opt-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; }
.opt-row .switch { flex: none; margin-top: 2px; }
.cg-start { justify-self: start; }
.btn.cg-mini { width: 22px; height: 22px; padding: 0; }
.btn.cg-mini .icon { width: 12px; height: 12px; }

/* ---------- share dialog ---------- */
.dialog.cg-share { width: min(520px, calc(100vw - 32px)); }
.cg-share .dialog-body { display: grid; gap: var(--space-3); }
.cg-share .section-title { margin-top: var(--space-1); }
.cg-share-foot { display: flex; align-items: center; gap: var(--space-2); }
.cg-confirm { display: grid; gap: var(--space-2); }
.banner:has(.cg-confirm) { align-items: flex-start; }

/* ---------- comments panel (reuses the history panel's slot) ---------- */
.cg-comments .details-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.cg-comments .details-header h2 { font-size: var(--text-md); font-weight: 600; margin: 0; }
.cg-comments .tabs button { display: inline-flex; align-items: center; gap: var(--space-1); }
.cg-thread-list { padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; overflow: auto; }
.cg-comments-empty { padding: var(--space-2) var(--space-1); display: flex; align-items: center; gap: var(--space-2); }
.cg-detached-title { padding-top: var(--space-2); }
.cg-comments-foot { border-top: 1px solid var(--border); border-bottom: 0; }
.cg-comments-foot .row { flex-wrap: wrap; }
.cg-comments-foot .btn { max-width: 100%; }
.cg-comments-foot .btn.is-active { background: var(--accent-subtle); color: var(--accent-fg); }

.thread-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; gap: var(--space-3);
  background: var(--bg-chrome); cursor: pointer; min-width: 0; }
.thread-card:hover { border-color: var(--border-strong, var(--border)); }
.thread-card.is-resolved { background: var(--bg-subtle); }
.thread-card.is-selected, .thread-card.is-new { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); cursor: default; }
.thread-card .row { min-width: 0; }
.thread-card .anchor-chip { max-width: 100%; min-width: 0; }
.thread-card .banner { align-items: flex-start; }
.thread-card .comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cg-comment-main { min-width: 0; flex: 1; }
.cg-comment-main .comment-meta { display: flex; align-items: center; gap: var(--space-2); }
.cg-comment-actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity 0.1s; }
.comment:hover .cg-comment-actions, .comment:focus-within .cg-comment-actions { opacity: 1; }
.composer textarea { white-space: pre-wrap; }

body.comments-open.details-closed .details { display: none; }
@media (max-width: 1599px) {
  .cg-comments { position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--z-panel-overlay); box-shadow: var(--shadow-2); }
  body.comments-open .canvas-corner, body.comments-open .canvas-tools { right: calc(var(--details-w) + var(--space-3)); }
  body.comments-open .canvas-banner { left: calc(50% - var(--details-w) / 2); }
}

/* ---------- pins on the canvas ---------- */
.cg-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.cg-pins.is-picking { pointer-events: auto; cursor: crosshair; }
/* One composited plane for all pins: a pan moves it and repaints nothing. */
.cg-pins-plane { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.cg-pin { position: absolute; left: 0; top: 0; margin: -12px 0 0 -12px; width: 24px; height: 24px; font-size: 10px;
  pointer-events: auto; cursor: pointer; border: 2px solid var(--bg-canvas, var(--bg)); padding: 0;
  /* No resting shadow: hundreds of shadowed pins cost a zoom its frames
     (e2e/scale.mjs); the canvas-coloured ring separates them instead. */
  /* Scene position (--sx, --sy, set per pin) scaled by the plane's --pin-k;
     the plane itself carries the pan (pins.rs plane_style). */
  transform: translate(calc(var(--sx) * var(--pin-k) * 1px), calc(var(--sy) * var(--pin-k) * 1px)); }
.cg-pin.is-dragged {
  transform: translate(calc((var(--sx) + var(--pin-dx)) * var(--pin-k) * 1px), calc((var(--sy) + var(--pin-dy)) * var(--pin-k) * 1px)); }
.cg-pin:hover { box-shadow: 0 0 0 2px var(--accent-border), var(--shadow-1); }
.cg-pin.is-point { border-radius: 50% 50% 50% 0; margin: -24px 0 0 0; }
.cg-pin.is-selected { box-shadow: 0 0 0 2px var(--dg-selection), var(--shadow-2); z-index: 1; }
.cg-pin:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.cg-pick-hint { position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  box-shadow: var(--shadow-1); z-index: 2; }

/* ---------- export menu and refusals ---------- */
.cg-export { position: relative; display: inline-flex; }
.cg-export-menu { min-width: 248px; }
.cg-export-menu .menu-item .hint { margin-left: auto; }
.cg-export-scale { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-2); }
.cg-export-scale .seg button { min-width: 36px; }
.cg-check { color: var(--accent-fg); }
.cg-diags { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-height: 280px; overflow: auto; }
.cg-diag { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--space-2); row-gap: 2px; width: 100%; text-align: left;
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-chrome); color: var(--fg); cursor: pointer; }
.cg-diag:hover { background: var(--bg-hover); }
.cg-diag .icon { color: var(--danger-fg); margin-top: 2px; grid-row: span 2; }
.cg-diag-msg { overflow-wrap: anywhere; }

/* ---------- visitor page ---------- */
.cg-visitor-bar .docname-static { max-width: 40vw; }
.cg-live-chip { display: inline-flex; align-items: center; gap: 6px; }
.cg-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-subtle); }

/* ---------- access tokens ---------- */
.cg-token-form { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--space-3); align-items: end; max-width: 560px; }
.cg-token-form-actions { grid-column: 1 / -1; }
.cg-token-once { align-items: flex-start; }
.cg-token-once-body { display: grid; gap: var(--space-2); flex: 1; min-width: 0; }