/* ============================================
   new-page-desktop-extras.css — styles for desktop-points.js and
   desktop-tips.js. Desktop-only: loadNewPageDesktop() is the only code path
   that ever creates this markup, so every rule here is wrapped in the same
   min-width desktop breakpoint the rest of new-page.css's desktop section
   uses.
   ============================================ */
@media (min-width: 769px) {

  /* ---- Checkered placeholder (Part 1d) ---- */

  .np-desktop-canvas-placeholder {
    position: fixed;
    border-radius: 12px;
    background: conic-gradient(#e6e6ea 25%, #fff 0 50%, #e6e6ea 0 75%, #fff 0) 0 0 / 22px 22px;
    pointer-events: none;
    z-index: 10;
    transition: opacity .3s;
  }

  /* ---- Sticker handles (install 24) ----
     The points and the rotate knob live in one layer placed right after
     #np-canvas (not inside it), so they show past the page edge while the
     stickers themselves stay clipped by the page. desktop-points.js copies
     the canvas's position, size, zoom transform and --np-inv onto the
     layer, and copies the selected sticker's box and rotation onto the
     ghost, so the handles line up exactly and turn with the sticker. */
  .np-handles-layer {
    position: absolute;
    pointer-events: none;
    z-index: 15;
  }
  .np-handles-ghost {
    position: absolute;
    pointer-events: none;
  }

  /* Sizes are multiplied by --np-inv (1 / zoom, set on #np-canvas by
     desktop-zoom.js and copied onto the handles layer; 1 when not zoomed) so points, the size box and the
     glow stay the same size on screen at every zoom (install 21). */
  .np-point {
    position: absolute;
    width: calc(12px * var(--np-inv, 1));
    height: calc(12px * var(--np-inv, 1));
    border-radius: 50%;
    background: #6D28D9;
    box-shadow: 0 0 0 calc(2px * var(--np-inv, 1)) #ffffff, 0 0 0 calc(3px * var(--np-inv, 1)) rgba(0,0,0,.25);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
  }
  /* Install 25: a bigger invisible grab area (28px) around each 12px point,
     so you don't have to land exactly on the dot. */
  .np-point::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(28px * var(--np-inv, 1));
    height: calc(28px * var(--np-inv, 1));
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }

  /* ---- Rotate handle (install 23): a knob on a short stem above the top
     point. Rotates only; the points only resize. Lives on the ghost like
     the points, so it turns with the sticker. The .np-rotate wrapper is a zero-size
     anchor placed exactly on the top point by desktop-points.js. ---- */
  .np-rotate {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .np-rotate-stem {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(1.5px * var(--np-inv, 1));
    height: calc(26px * var(--np-inv, 1));
    background: #6D28D9;
    transform: translateX(-50%);
  }
  .np-rotate-knob {
    position: absolute;
    left: 0;
    bottom: calc(26px * var(--np-inv, 1));
    width: calc(24px * var(--np-inv, 1));
    height: calc(24px * var(--np-inv, 1));
    transform: translate(-50%, 0);
    border-radius: 50%;
    background: #ffffff;
    border: calc(2px * var(--np-inv, 1)) solid #6D28D9;
    color: #6D28D9;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: grab;
  }
  .np-rotate-knob:active { cursor: grabbing; }
  /* Install 25: no room above the sticker → the knob hangs below it
     (icon kept upright); no room either way → pinned inside the visible
     area with no stem (desktop-points.js decides). */
  .np-rotate.np-rotate-flip { transform: rotate(180deg); }
  .np-rotate.np-rotate-flip .np-rotate-knob svg { transform: rotate(180deg); }
  .np-rotate.np-rotate-pinned .np-rotate-stem { display: none; }
  .np-rotate-knob svg {
    width: calc(13px * var(--np-inv, 1));
    height: calc(13px * var(--np-inv, 1));
    pointer-events: none;
  }

  /* Selected glow, re-declared here so it also scales with the zoom (same
     selector as new-page.css; this file loads later, so it wins). */
  .np-sticker-el.np-selected-desktop > img {
    filter: drop-shadow(0 0 calc(4px * var(--np-inv, 1)) #6D28D9) drop-shadow(0 0 calc(2px * var(--np-inv, 1)) #6D28D9);
  }

  /* ---- Smart guides (desktop-guides.js): exists only during a drag ---- */
  .np-guides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 99999;
  }

  /* ---- Tips "?" button ---- */

  .np-desktop-tips-btn {
    position: fixed;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    color: #4b5563;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
  }

  /* ---- Tips card + backdrop ----
     No rules here at all now. Both the backdrop and the card (topbar,
     title, close button, pill row, pills, tip list, tip items) set every
     style inline in desktop-tips.js's open() — the same reasoning that
     already applied to the backdrop turned out to apply to the card too
     (its stylesheet rules stopped taking effect live for reasons not
     reproducible from code alone, even though nothing here had changed).
     Matching the publish modal (np-publish-modal-overlay), which has never
     hit this: fully inline, zero stylesheet dependency. cleanupAllModals in
     nav.js (np-desktop-tips-backdrop is listed there, next to
     np-publish-modal-overlay) remains the navigation-away safety net. */
}