/* =====================================================================
   comments.css — review/annotation overlay (dev tool, not shipped art)
   A lightweight "comment on the artifact" layer: toggle Review mode,
   click anywhere to drop a numbered pin + note, then Export the list.
   Hidden entirely in print.
   ===================================================================== */

#pdc-toolbar, #pdc-panel, .pdc-pin, #pdc-tip { font-family: var(--pd-font-sans); }

/* Floating toolbar */
#pdc-toolbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--pd-cardamom);
  color: var(--pd-chai-milk);
  border-radius: var(--pd-radius-pill);
  box-shadow: var(--pd-shadow-3);
}
#pdc-toolbar button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-chai-milk);
  background: transparent;
  border: 0;
  border-radius: var(--pd-radius-pill);
  padding: 7px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#pdc-toolbar button:hover { background: rgba(242,240,231,0.12); }
#pdc-toolbar button.pdc-on {
  background: var(--pd-cherry);
  color: #fff;
}
#pdc-count {
  font-size: 11px;
  background: rgba(242,240,231,0.16);
  border-radius: var(--pd-radius-pill);
  padding: 2px 8px;
  min-width: 20px;
  text-align: center;
}
#pdc-toolbar .pdc-sep { width: 1px; height: 22px; background: rgba(242,240,231,0.2); }

/* While commenting, the page takes a crosshair and a faint tint */
body.pdc-active { cursor: crosshair; }
body.pdc-active main { outline: 2px dashed color-mix(in srgb, var(--pd-cherry) 40%, transparent); outline-offset: -2px; }

/* Pins */
.pdc-pin {
  position: absolute;
  z-index: 8000;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50% 50% 50% 2px;
  background: var(--pd-cherry);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: var(--pd-shadow-2);
  cursor: pointer;
  border: 1.5px solid #fff;
}
.pdc-pin:hover { transform: scale(1.12); }

/* Tooltip shown on pin hover */
#pdc-tip {
  position: absolute;
  z-index: 8500;
  max-width: 240px;
  background: var(--pd-cardamom);
  color: var(--pd-chai-milk);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: var(--pd-radius-4);
  box-shadow: var(--pd-shadow-2);
  pointer-events: none;
}
#pdc-tip .pdc-tip-label { color: color-mix(in srgb, var(--pd-chai-milk) 65%, transparent); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; display:block; margin-bottom:3px; }

/* Note editor popover */
#pdc-editor {
  position: absolute;
  z-index: 8600;
  width: 280px;
  background: var(--pd-bg-elevated);
  color: var(--pd-fg);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-8);
  box-shadow: var(--pd-shadow-3);
  padding: 12px;
}
#pdc-editor .pdc-ed-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pd-fg-subtle); margin-bottom: 6px;
}
#pdc-editor textarea {
  width: 100%; min-height: 72px; resize: vertical;
  font: inherit; font-size: 13px;
  border: 1px solid var(--pd-border-strong); border-radius: var(--pd-radius-4);
  padding: 8px; background: var(--pd-bg);
}
#pdc-editor .pdc-ed-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
#pdc-editor button {
  font: inherit; font-size: 12px; font-weight: 600;
  border-radius: var(--pd-radius-4); padding: 6px 12px; cursor: pointer; border: 0;
}
#pdc-editor .pdc-save { background: var(--pd-cherry); color: #fff; }
#pdc-editor .pdc-del  { background: transparent; color: var(--pd-danger); }

/* Export / list panel */
#pdc-panel {
  position: fixed;
  right: 16px;
  bottom: 70px;
  z-index: 8900;
  width: 340px;
  max-height: 60vh;
  overflow: auto;
  background: var(--pd-bg-elevated);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-8);
  box-shadow: var(--pd-shadow-3);
  padding: 14px;
}
#pdc-panel h3 { font-family: var(--pd-font-display); text-transform: uppercase; letter-spacing:.08em; font-size: 14px; margin: 0 0 10px; }
#pdc-panel textarea {
  width: 100%; min-height: 160px; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  border: 1px solid var(--pd-border-strong); border-radius: var(--pd-radius-4); padding: 8px; background: var(--pd-bg);
}
#pdc-panel .pdc-hint { font-size: 11px; color: var(--pd-fg-subtle); margin: 8px 0 0; line-height: 1.4; }

/* Never print the review layer */
@media print {
  #pdc-toolbar, #pdc-panel, .pdc-pin, #pdc-tip, #pdc-editor { display: none !important; }
  body.pdc-active main { outline: 0 !important; }
}