/* ═══════════════════════════════════════════════════════════════════════════
   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) .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 var(--ease), 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:var(--r-lg);
  background:#fff;color:#1c1c1e;font-family:var(--font-sans);
  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;}
/* 44×44 hit area, 28×28 look (X6.5): the widget keeps its desktop scatter down to
   600px, so these are live on touch tablets. The padding grows the target and the
   equal negative margin gives the size back to the layout, so the toolbar renders
   byte-for-byte as before — it just takes the toolbar's own 8px vertical padding
   as tappable, which is inert space anyway. */
.ks-notes-navbtn{background:none;border:none;width:44px;height:44px;margin:-8px;padding:8px;display:flex;align-items:center;justify-content:center;font-size:22px;color:rgba(0,0,0,0.35);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;
    /* Extra bottom room so the last stickers clear the fixed prev/next nav pills. */
    padding:0 0 calc(96px + env(safe-area-inset-bottom));
    /* Show the full-screen white sheet instantly — no opacity fade. Fading it in
       (the desktop sticker-entrance behaviour) over the modal's darkening dim reads
       as a black→white flash on this full-bleed card. */
    opacity:1;transition:none;
  }
  /* The card fully covers the modal, so its black dim is never seen; keep the
     background-color transition (its end still tears the modal down on close) but
     make it quick so closing doesn't hold a static white sheet for .7s. */
  .ks-modal.ins-modal{transition:background-color .18s ease;}
  /* Hide only the floating top title/close (replaced by the in-card header). The
     bottom folder nav (prev/next) stays — it's dark-adapted for the light card below. */
  .ins-modal .ks-modal-title,
  .ins-modal .ks-modal-close:not(.ks-modal-prev):not(.ks-modal-next){display:none;}
  /* Bottom folder nav — keep the exact frosted-glass pill of the standard prev/next
     (near-transparent bg, blur, white gradient hairline, soft shadow); only the arrow
     icon is switched to black so it reads on the light note card. */
  .ins-modal .ks-modal-prev img,
  .ins-modal .ks-modal-next img{filter:brightness(0);opacity:.85;}   /* white arrow → black */
  /* 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;
    /* Consistent 32px side inset (top grows only for a notch). */
    padding:max(24px,env(safe-area-inset-top)) 32px 24px;
    background:#f6f5f3;border-bottom:1px solid rgba(0,0,0,0.08);
  }
  /* Title = same type as the standard floating .ks-modal-title (16px/600). */
  .ins-mh-title{
    font-family:var(--font-sans);font-size:16px;font-weight:600;
    letter-spacing:-0.01em;color:#1c1c1e;
  }
  /* Close = the exact frosted-glass pill treatment of the standard .ks-modal-close
     (near-transparent bg, blur, white gradient hairline via ::before, soft shadow),
     only the text + ✕ icon are switched to black so they read on the light header. */
  .ins-mh-close{
    position:relative;
    display:inline-flex;align-items:center;gap:10px;
    padding:12px 16px;border:none;border-radius:var(--r-lg);cursor:pointer;
    /* surface = the shared .glass recipe in assets/shared/components.css */
    font-family:var(--font-sans);font-size:15px;color:#1c1c1e;
  }
  .ins-mh-close img{display:block;filter:brightness(0);opacity:.85;transform:translateY(1.5px);}
  /* 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 32px 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 32px 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);
  }
  /* Kill desktop-only touch leakage: :hover sticks on tap, so neutralise the
     lift AND the z-index bump (line 31) — the JS drag already bails at this width,
     and goal-preview's fade is guarded in JS, but reset it here too so a stale
     class from a desktop→mobile resize never leaves a sticker dimmed. */
  .ins-modal .ins-sticker:hover{transform:none;box-shadow:0 6px 18px rgba(0,0,0,0.14);z-index:auto;}
  .ins-modal .ins-sticker.goal-preview{opacity:1;}
  .ins-modal .ins-sticker.goal-hidden{display:none;}   /* filtered-off → drop the cell */
  /* Fluid so the square holds its 1:1 aspect on narrow phones: the 32px side gutters
     make the 2-col stickers tight, and a fixed 14px overflowed → cell grew taller.
     ~12px @ 390px (12 Pro), ~13px @ 428px (Pro Max), floor 11.5 / ceiling 13.5px. */
  .ins-modal .ins-text{font-size:clamp(11.5px, 2.5vw + 2.25px, 13.5px);line-height:1.4;overflow-wrap:anywhere;}
  .ins-modal .ins-title{font-size:11px;padding-top:12px;}
}