/* ─────────────────────────────────────────────────────────────────────────────
   Sticky notes — case studies only. Built by notes.js, gated on .case.

   There is no button and no panel. In the margin beside the article the pointer
   picks up a blank sticky; clicking drops it where you clicked; you type and
   press Enter. The cursor IS the affordance.

   DESKTOP ONLY. The whole interaction is a cursor, and a touch screen has none;
   the margin it lives in only exists at 1309px and up. 1309 is not a round
   number — it is where .wrap reaches its --col max of 1308.8px and the slack
   beside .case stops changing.
   Same rule as everywhere: calc(<figma-px> * var(--s)), literal = Figma value.
   ───────────────────────────────────────────────────────────────────────────── */

.notes{display:none}
.note-ghost{display:none}

@media (min-width:1309px) and (hover:hover) and (pointer:fine){
  /* Absolutely positioned INSIDE .case, not fixed to the viewport. An
     absolutely positioned child of a grid container is not a grid item, so the
     article keeps its 842 by construction rather than by luck; and measuring
     from .case is immune to the scrollbar drift 100vw introduces. Notes
     therefore scroll with the article they were left beside, which is the
     entire point of leaving them there.
       187 rail + 32 gap + 842 article + 32 gap = 1093, + 187 = 1280 Figma frame. */
  .notes{display:block;position:absolute;top:0;bottom:0;z-index:30;
    left:calc(1093px * var(--s));
    width:calc(187px * var(--s))}
  .case{position:relative}

  /* The standing label for the margin. Sized and coloured like the left rail's
     own nav so the two read as a matched pair either side of the article. */
  /* The same margin .case carries as padding-top, so the label's natural
     position is the arrow's natural position. Both then stick at --nav-clear,
     so they are level at the top of the page AND level once stuck -- not just
     one or the other. Put on the label rather than the .notes layer so stored
     note positions do not all shift by 93px.

     The extra -2.85 is half-leading. The label is text and the arrow is an SVG:
     aligning their BOXES leaves the text's ink 3px low, because a line box puts
     (line-height - font-size) / 2 above the cap and an SVG has no such gap.
     (1.38 - 1) x 15 / 2 = 2.85. Measured: boxes 133/133, ink 133/136 before
     this, 133/133 after. */
  .notes-label{position:sticky;top:var(--nav-clear);
    margin-top:calc(var(--nav-clear) - var(--pad) + 26px - 2.85px * var(--s));
    font-size:calc(15px * var(--s));line-height:1.38;font-weight:700;
    color:var(--ink);opacity:.55}
  .notes-label::after{content:"";display:block;margin-top:calc(10px * var(--s));
    width:calc(40px * var(--s));border-top:1px solid var(--ink);opacity:.4}

  .note{position:absolute;
    width:calc(170px * var(--s));min-height:calc(78px * var(--s));
    background:var(--sticky);color:var(--ink);
    padding:calc(13px * var(--s)) calc(13px * var(--s)) calc(11px * var(--s));
    border-radius:calc(3px * var(--s));
    box-shadow:0 calc(4px * var(--s)) calc(12px * var(--s)) calc(-4px * var(--s)) rgb(29 51 84 / .4);
    font-size:calc(14px * var(--s));line-height:1.45;
    white-space:pre-wrap;          /* keep the writer's breaks; notes.js caps runs at two */
    overflow-wrap:anywhere;        /* a 280-character word must not widen the margin */
    transform:rotate(-1.2deg)}
  .note:nth-of-type(even){transform:rotate(.9deg)}

  .note .kill{position:absolute;top:calc(3px * var(--s));right:calc(5px * var(--s));
    border:0;background:none;cursor:pointer;line-height:1;font:inherit;
    font-size:calc(15px * var(--s));color:rgb(29 51 84 / .38);
    padding:calc(2px * var(--s)) calc(4px * var(--s));border-radius:calc(4px * var(--s))}
  .note .kill:hover{color:var(--deep)}

  /* the note being written in */
  .note--edit{transform:rotate(-1.2deg);
    box-shadow:0 calc(10px * var(--s)) calc(24px * var(--s)) calc(-8px * var(--s)) rgb(29 51 84 / .45)}
  .note--edit textarea{display:block;width:100%;border:0;background:none;resize:none;
    font:inherit;font-size:calc(14px * var(--s));line-height:1.45;color:var(--ink);
    min-height:calc(52px * var(--s));padding:0;outline:none}
  .note--edit textarea::placeholder{color:rgb(29 51 84 / .4)}
  .note--edit .hint{display:block;margin-top:calc(6px * var(--s));
    font-family:"Roboto Mono",monospace;font-size:calc(9px * var(--s));
    letter-spacing:.08em;text-transform:uppercase;color:rgb(29 51 84 / .42)}

  /* ── the cursor sticky ──────────────────────────────────────────────────
     Two nested elements on purpose: the outer carries the position transform
     that follows the pointer, the inner carries the rotation and the drop
     animation. One element cannot do both — they would fight over transform.
     pointer-events:none throughout, so it never swallows a click. */
  .note-ghost{display:block;position:fixed;left:0;top:0;z-index:48;
    pointer-events:none;opacity:0;transition:opacity .16s ease;will-change:transform}
  .note-ghost.on{opacity:1}
  .note-ghost i{display:block;position:relative;
    width:calc(58px * var(--s));height:calc(58px * var(--s));
    background:var(--sticky);border-radius:calc(2px * var(--s));
    box-shadow:0 calc(6px * var(--s)) calc(16px * var(--s)) calc(-6px * var(--s)) rgb(29 51 84 / .45);
    transform:rotate(-4deg);transform-origin:50% 50%;
    transition:transform .3s var(--ease),opacity .3s ease}
  /* three ruled lines, so a blank sticky still reads as somewhere to write */
  .note-ghost i::before{content:"";position:absolute;
    inset:calc(13px * var(--s)) calc(10px * var(--s)) auto;
    height:calc(1px * var(--s));background:rgb(29 51 84 / .22);
    box-shadow:0 calc(8px * var(--s)) 0 rgb(29 51 84 / .22),
               0 calc(16px * var(--s)) 0 rgb(29 51 84 / .22)}
  .note-ghost.drop i{transform:rotate(-14deg) scale(.55);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .note,.note--edit{transform:none}
  .note-ghost,.note-ghost i{transition:none}
}