/* ═══════════════════════════════════════════════════════════════════════════
   Research & Insights — shared component (draggable "Apple Notes" widget +
   scattered insight stickers on desktop; a full-screen 2-column note on phones).

   Single source of truth for preply / kyivstar / deal. Behaviour lives in
   research-insights.js. Loaded byte-identically on every page (see the vendor-tag
   rule in CLAUDE.md), so it must stay page-agnostic — everything is scoped to the
   .ins-modal marker class, never a page-specific modal id.

   Per-page theming is done with two custom properties set on .ins-modal:
     --ins-accent  sticker background   (default = preply pink)
     --ins-ink     sticker text colour  (default = preply plum)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop: draggable pink insight stickers ─────────────────────────────── */
.ins-cluster{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .5s var(--ease,cubic-bezier(.16,1,.3,1)) .12s;}
.ins-modal.open .ins-cluster{opacity:1;}
.ins-sticker{
  position:absolute;
  width:224px;
  aspect-ratio:1/1;
  display:flex;flex-direction:column;justify-content:flex-start;
  background:var(--ins-accent,#F7C0F3);color:var(--ins-ink,#3a1119);
  border-radius:0;
  padding:22px 24px;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
  cursor:grab;user-select:none;touch-action:none;
  transform:rotate(var(--r,0deg));
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, opacity .15s ease;
}
.ins-sticker:hover{transform:rotate(var(--r,0deg)) scale(1.05);box-shadow:0 22px 48px rgba(0,0,0,.36);z-index:90;}
.ins-sticker.dragging{cursor:grabbing;transition:none;box-shadow:0 26px 56px rgba(0,0,0,.42);}
.ins-sticker.goal-preview{opacity:.75;}
.ins-sticker.goal-hidden{opacity:0;pointer-events:none;}  /* checked-off — listed after so it wins */
.ins-title{display:block;font-size:12px;font-weight:400;margin-top:auto;padding-top:11px;
  color:rgba(58,17,25,.55);                                            /* fallback for --ins-ink default */
  color:color-mix(in srgb, var(--ins-ink,#3a1119) 55%, transparent);  /* tag = 55% of the sticker ink */
}
.ins-text{font-size:15px;line-height:1.42;font-weight:500;}
.ins-text strong{font-weight:800;color:inherit;}

/* ── Project Goals notes widget ───────────────────────────────────────────── */
.ins-notes{
  position:absolute;top:11%;left:3%;z-index:100;
  width:360px;overflow:hidden;border-radius:24px;
  background:#fff;color:#1c1c1e;font-family:'General Sans',sans-serif;
  box-shadow:0 32px 80px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.18);
  user-select:none;
}
.ks-notes-toolbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#f6f5f3;border-bottom:1px solid rgba(0,0,0,0.08);cursor:grab;touch-action:none;}
.ins-notes.dragging .ks-notes-toolbar{cursor:grabbing;}
.ks-notes-dots{display:flex;gap:7px;flex-shrink:0;}
.ks-notes-dot{width:13px;height:13px;border-radius:50%;display:block;border:0.5px solid rgba(0,0,0,0.12);}
.ks-notes-dot.red{background:#ff5f57;}
.ks-notes-dot.yellow{background:#febc2e;}
.ks-notes-dot.green{background:#28c840;}
.ks-notes-titleblock{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;}
.ks-notes-titleblock strong{font-size:13px;font-weight:600;color:#1c1c1e;letter-spacing:-0.01em;}
.ks-notes-titleblock span{font-size:11px;color:rgba(0,0,0,0.4);font-weight:400;}
.ks-notes-navbtn{background:none;border:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:22px;color:rgba(0,0,0,0.35);padding:0;line-height:1;flex-shrink:0;}
.ks-notes-body{padding:14px 32px 60px;}
.ks-notes-date{font-size:12px;color:rgba(0,0,0,0.35);text-align:center;margin-bottom:12px;}
.ks-notes-context{font-size:15px;line-height:1.45;color:#1c1c1e;font-weight:400;margin-bottom:16px;}
.ks-notes-section-title{font-size:17px;font-weight:600;color:#1c1c1e;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.ks-notes-checklist{display:flex;flex-direction:column;gap:14px;}
.ks-notes-item{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#1c1c1e;line-height:1.45;font-weight:400;cursor:pointer;}
.ks-notes-circle{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(0,0,0,0.25);flex-shrink:0;margin-top:1px;background:none;transition:background .2s ease,border-color .2s ease;display:flex;align-items:center;justify-content:center;}
.ks-notes-item.checked .ks-notes-circle{background:#f5a623;border-color:#f5a623;}
.ks-notes-item.checked .ks-notes-circle::after{content:'';display:block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);}

/* Sticker wrapper — a no-op passthrough on desktop (stickers stay direct-child
   absolute-positioned, driven by JS); becomes a 2-col grid on mobile. */
.ins-grid{display:contents;}
/* In-card mobile header — hidden on desktop (floating title/close pills used there). */
.ins-mobile-header{display:none;}

/* ── Full-screen mobile note (≤599px, phones only) ───────────────────────────
   The desktop draggable "Apple Notes widget + floating stickers" collapses into
   one full-screen, vertically-scrollable note card: a grey header bar, the note
   body (metadata → 🎯 goals → checklist), then the stickers embedded below in a
   2-column grid. Floating desktop chrome (title pill, close pill, folder prev/
   next, note toolbar/traffic-lights) is hidden; JS drag + absolute layout bail
   out at this width (see research-insights.js). Kept at the phone breakpoint so
   tablets/small-desktops keep the draggable scatter. */
@media(max-width:599px){
  /* Cluster IS the full-screen note card: white, block-flow, scrolls as one. */
  .ins-modal .ins-cluster{
    display:block;position:absolute;inset:0;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;color:#1c1c1e;
    padding:0 0 calc(28px + env(safe-area-inset-bottom));
  }
  /* Hide floating desktop chrome for this modal (replaced by the in-card header). */
  .ins-modal .ks-modal-title,
  .ins-modal .ks-modal-close,
  .ins-modal .ks-modal-prev,
  .ins-modal .ks-modal-next{display:none;}
  /* In-card grey header bar — title left, Close pill right; sticks while scrolling. */
  .ins-mobile-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:20;
    padding:max(14px,env(safe-area-inset-top)) 18px 14px;
    background:#f6f5f3;border-bottom:1px solid rgba(0,0,0,0.08);
  }
  .ins-mh-title{
    font-family:'General Sans',sans-serif;font-size:17px;font-weight:600;
    letter-spacing:-0.01em;color:#1c1c1e;
  }
  .ins-mh-close{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:36px;padding:8px 18px;border:none;border-radius:999px;cursor:pointer;
    background:rgba(0,0,0,0.06);color:#1c1c1e;
    font-family:'General Sans',sans-serif;font-size:15px;font-weight:500;
  }
  .ins-mh-close:active{background:rgba(0,0,0,0.12);}
  /* Notes widget flows as the top section of the card (toolbar/traffic-lights gone). */
  .ins-modal .ins-notes{
    position:static;width:auto;border-radius:0;box-shadow:none;background:transparent;
  }
  .ins-modal .ins-notes .ks-notes-toolbar{display:none;}
  .ins-modal .ins-notes .ks-notes-body{padding:20px 18px 8px;}
  .ins-modal .ks-notes-date{
    text-align:left;font-size:12px;font-weight:600;letter-spacing:.02em;
    color:rgba(0,0,0,0.42);margin-bottom:10px;
  }
  /* Stickers: 2-per-row grid, embedded directly below the checklist.
     align-items:start keeps each sticker its own height so the square shape
     holds (grid-stretch would otherwise pull short cells to the row's height). */
  .ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 18px 4px;align-items:start;}
  .ins-modal .ins-spacer{display:none;}
  .ins-modal .ins-sticker{
    position:static;width:auto;aspect-ratio:1/1;   /* stay square; grows taller only if text overflows */
    left:auto;top:auto;right:auto;bottom:auto;
    transform:none;
    cursor:default;touch-action:auto;
    padding:15px 15px 13px;
    box-shadow:0 6px 18px rgba(0,0,0,0.14);
  }
  .ins-modal .ins-sticker:hover{transform:none;box-shadow:0 6px 18px rgba(0,0,0,0.14);}
  .ins-modal .ins-sticker.goal-hidden{display:none;}   /* filtered-off → drop the cell */
  .ins-modal .ins-text{font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
  .ins-modal .ins-title{font-size:11px;padding-top:12px;}
}