/*
 * Plugin hero stage "stickyCanvas" (stages/stickyCanvas.php): Notely Sticky Widget notes on a Figma
 * canvas, as the widget draws them (widget-src/components/NoteCard.tsx): a rounded card in the
 * note's colour, the tag chip, a bold title, the body, images two to a row, a quote, a link pill and
 * the author stamp. Sizes follow the widget's S / M / L (308 / 440 / 880 px, defaults.ts:82-85),
 * scaled to the canvas: every length is a fraction of the note's width (--w), so a size change
 * scales the whole note, as it does in Figma. The selected note carries Figma's selection outline and
 * its property bar. The canvas is the art stage's size container (components/artStage).
 */
.sticky-canvas {
  /* A warm paper canvas with dots in the Notely orange (the page's brand), not FigJam's lilac. */
  --canvas: #faf3ee;
  --dot: rgba(255, 94, 58, 0.24);
  --select: #9747ff;
  --bar: #1e1e1e;
  position: absolute; inset: 0; z-index: 1;
  font-family: var(--font-secondary);
  pointer-events: auto; /* parallax.css turns stage layers off; this canvas is meant to be played with */
}
.sticky-canvas__board { pointer-events: none; }
html.dark .sticky-canvas { --canvas: #2b2430; --dot: rgba(255, 140, 110, 0.22); }

.sticky-canvas__board {
  position: absolute; inset: 3cqh 2cqw;
  border-radius: 4cqw;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0 / 2.4cqw 2.4cqw,
    var(--canvas);
  box-shadow: 0 1.5cqw 5cqw rgba(40, 30, 90, 0.14);
}

.sticky-canvas__item { position: absolute; left: var(--x); top: var(--y); }
.sticky-canvas__item.is-selected { z-index: 3; }

/* The site's button base (a 44 px floor and the pixel shadow) belongs to page actions, not to
   controls drawn inside a Figma canvas. */
.sticky-canvas button, .sticky-showcase button,
.sticky-canvas button:is(:hover, :focus, :active), .sticky-showcase button:is(:hover, :focus, :active) {
  min-height: 0; box-shadow: none; transform: none; translate: none; outline: none;
  text-transform: none; letter-spacing: normal;
}
.sticky-note__fold:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 4px; }

/* The canvas in a page section (renderStickyCanvas outside the hero): its own size container and
   parallax stage, the same proportions as the hero's art stage. */
.sticky-canvas-frame { position: relative; width: 100%; aspect-ratio: 1 / 0.92; container-type: size; }

/* ---- One note ---------------------------------------------------------------------------- */
.sticky-note {
  --w: 40cqw;
  box-sizing: border-box; width: var(--w);
  padding: calc(var(--w) * 0.06) calc(var(--w) * 0.07);
  border-radius: calc(var(--w) * 0.05);
  background: var(--note-bg); color: var(--note-ink);
  box-shadow: 0 calc(var(--w) * 0.012) calc(var(--w) * 0.04) rgba(20, 10, 60, 0.16);
  line-height: 1.25;
  transition: width 0.28s cubic-bezier(.2, .8, .2, 1), background-color 0.2s, color 0.2s;
}
.sticky-note--s { --w: 30cqw; }
.sticky-note--m { --w: 40cqw; }
.sticky-note--l { --w: 56cqw; }

.sticky-note__images {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * 0.012);
  margin-bottom: calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.035); overflow: hidden;
}
.sticky-note__images img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: rgba(255, 255, 255, 0.4); }

/* The site's paragraph colour (typography.css) would win over the note's ink; text follows the note. */
.sticky-note :is(p, span, cite, blockquote) { color: inherit; }
.sticky-note__head { display: flex; align-items: center; justify-content: space-between; }
.sticky-note__tag {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.3em 0.8em; border-radius: 99px;
  background: var(--tag-bg); color: var(--tag-ink);
  font-size: max(9px, calc(var(--w) * 0.036)); font-weight: 600;
}
.sticky-note__fold {
  display: grid; place-items: center; width: max(12px, calc(var(--w) * 0.06)); height: max(12px, calc(var(--w) * 0.06)); flex: none;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer;
}
.sticky-note__fold svg { width: 100%; height: 100%; transition: rotate 0.2s; }
.sticky-note.is-collapsed .sticky-note__fold svg { rotate: 180deg; }

.sticky-note__title {
  margin: calc(var(--w) * 0.025) 0 0; outline: 0;
  font-size: calc(var(--w) * 0.068); font-weight: 700; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.sticky-note__title[contenteditable="true"] { cursor: text; border-radius: 0.15em; }
.sticky-note__title[contenteditable="true"]:focus { box-shadow: 0 0 0 0.12em color-mix(in oklab, var(--note-ink) 45%, transparent); }

/* One column that may shrink below its content: the author line never wraps, and as the column's
   minimum it pushed the body and the stamp past a small note's edge. */
.sticky-note__more { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--w) * 0.03); margin-top: calc(var(--w) * 0.02); }
.sticky-note__body { margin: 0; font-size: max(10px, calc(var(--w) * 0.046)); opacity: 0.72; }
.sticky-note__quote {
  margin: 0; padding: calc(var(--w) * 0.02) calc(var(--w) * 0.03);
  border-left: calc(var(--w) * 0.006) solid currentColor; border-radius: 0.2em;
  background: color-mix(in oklab, var(--note-ink) 7%, transparent);
  font-size: calc(var(--w) * 0.045);
}
.sticky-note__quote p { margin: 0; font-style: italic; }
.sticky-note__quote cite { display: block; font-size: 0.7em; font-style: normal; opacity: 0.75; }
.sticky-note__link {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.8em; border-radius: 99px;
  background: color-mix(in oklab, var(--note-ink) 9%, transparent);
  font-size: max(9px, calc(var(--w) * 0.038));
}
.sticky-note__link svg, .sticky-note__edit svg { width: 1em; height: 1em; }
.sticky-note__foot { display: flex; align-items: center; gap: 0.6em; font-size: max(9px, calc(var(--w) * 0.036)); opacity: 0.75; }
.sticky-note__avatar { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; flex: none; }
.sticky-note__avatar--initials { display: grid; place-items: center; background: color-mix(in oklab, var(--note-ink) 18%, transparent); font-weight: 700; }
.sticky-note__meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-note__edit { display: inline-flex; align-items: center; gap: 0.3em; }

.sticky-note__read-more { display: none; margin-top: calc(var(--w) * 0.015); font-size: max(9px, calc(var(--w) * 0.04)); opacity: 0.7; }
.sticky-note.is-collapsed .sticky-note__images,
.sticky-note.is-collapsed .sticky-note__more { display: none; }
.sticky-note.is-collapsed .sticky-note__read-more { display: block; }

/* ---- Selection, label and Figma's property bar ------------------------------------------- */
.sticky-canvas__item.is-selected .sticky-note { outline: 0.35cqw solid var(--select); outline-offset: 0.35cqw; }
.sticky-canvas__label {
  position: absolute; left: 0; bottom: calc(100% + 1.2cqw);
  display: flex; align-items: center; gap: 0.8cqw;
  color: var(--select); font-size: 2.2cqw; font-weight: 500; white-space: nowrap;
}
.sticky-canvas__label img { width: 3cqw; height: 3cqw; border-radius: 0.6cqw; }
.sticky-canvas__bar {
  position: absolute; right: 0; bottom: calc(100% + 4.6cqw);
  display: flex; align-items: center; gap: 0.6cqw;
  padding: 0.8cqw; border-radius: 1.6cqw;
  background: var(--bar); color: #fff;
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.25);
}
.sticky-canvas__bar > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4cqw;
  min-width: 5.6cqw; height: 5.6cqw; margin: 0; padding: 0 0.8cqw;
  border: 0; border-radius: 1cqw; background: none; color: inherit; cursor: pointer;
}
.sticky-canvas__bar > button:hover, .sticky-canvas__bar > button[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.sticky-canvas__bar > button:focus-visible { outline: 2px solid #0d99ff; outline-offset: 1px; }
.sticky-canvas__bar svg { width: 3cqw; height: 3cqw; }
.sticky-canvas__swatch i {
  width: 3.6cqw; height: 3.6cqw; border-radius: 50%;
  background: var(--current-color, #ffd527); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.sticky-canvas__swatch svg { width: 2.2cqw; height: 2.2cqw; }
.sticky-canvas__sep { width: 1px; height: 4cqw; background: rgba(255, 255, 255, 0.18); }

.sticky-canvas__colors {
  position: absolute; right: 0; bottom: calc(100% + 1.4cqw);
  display: flex; gap: 1cqw; padding: 1.2cqw 1.4cqw; border-radius: 99px;
  background: var(--bar); box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.25);
}
.sticky-canvas__colors[hidden] { display: none; }
.sticky-canvas__colors button {
  width: 4.4cqw; height: 4.4cqw; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0.3cqw solid transparent; background: var(--swatch) content-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.sticky-canvas__colors button[aria-checked="true"] { border-color: #0d99ff; }
.sticky-canvas__colors button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .sticky-note, .sticky-note__fold svg { transition: none; }
}

/* ---- Notes in a page showcase (renderStickyNote outside the hero) ---------------------------- */
.sticky-showcase {
  container-type: inline-size;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px;
  /* Fixed lengths here: a container cannot size its own padding in its own query units. */
  padding: 28px 16px; border-radius: 20px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 94, 58, 0.24) 1px, transparent 1.5px) 0 0 / 14px 14px,
    #faf3ee;
  font-family: var(--font-secondary);
}
html.dark .sticky-showcase { background-color: #2b2430; }
/* As a parallax stage: parallax.css takes [data-parallax] > div out of flow; the notes keep the wrap
   layout and only float in depth. */
/* The parallax script sets position: absolute inline on each layer; !important keeps the wrap layout. */
.sticky-showcase[data-parallax] > .sticky-showcase__layer { position: relative !important; pointer-events: auto; }
.sticky-showcase .sticky-note--s { --w: calc(50cqw - 6px); }
.sticky-showcase .sticky-note--m { --w: min(100cqw, 340px); }
.sticky-showcase .sticky-note--l { --w: min(100cqw, 460px); }

/* ---- Retro skin ('retro' => true): the same notes in the site's pixel language -----------------
   Ink outlines, one hard offset shadow, square corners and pixel type, like the uiMockup windows of
   the other plugin heroes; the note colours, tags and layout stay the widget's own. */
.sticky-canvas--retro { --ink: var(--color-text-primary); --select: var(--ink); --canvas: var(--color-bg); }
.sticky-canvas--retro .sticky-canvas__board {
  border-radius: 0;
  border: 0.8cqw solid var(--ink);
  box-shadow: 1.4cqw 1.4cqw 0 var(--ink);
  background:
    linear-gradient(color-mix(in oklab, var(--ink) 9%, transparent) 0.25cqw, transparent 0.25cqw) 0 0 / 4cqw 4cqw,
    linear-gradient(90deg, color-mix(in oklab, var(--ink) 9%, transparent) 0.25cqw, transparent 0.25cqw) 0 0 / 4cqw 4cqw,
    color-mix(in oklab, var(--canvas) 65%, transparent);
  /* Frosted: the hero's blob light shows through the canvas. */
  -webkit-backdrop-filter: blur(3.2cqw) saturate(1.15);
  backdrop-filter: blur(3.2cqw) saturate(1.15);
}
.sticky-canvas--retro .sticky-note {
  border-radius: 0;
  border: max(2px, calc(var(--w) * 0.014)) solid var(--ink);
  box-shadow: calc(var(--w) * 0.03) calc(var(--w) * 0.03) 0 var(--ink);
}
.sticky-canvas--retro .sticky-note__title {
  font-family: var(--font-primary); font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--w) * 0.058); letter-spacing: 0.03em; line-height: 1.35;
}
.sticky-canvas--retro :is(.sticky-note__tag, .sticky-note__link) {
  border-radius: 0; box-shadow: inset 0 0 0 max(1px, calc(var(--w) * 0.006)) currentColor;
}
.sticky-canvas--retro .sticky-note__tag-label { font-family: var(--font-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.sticky-canvas--retro .sticky-note__avatar { border-radius: 0; box-shadow: 0 0 0 max(1px, calc(var(--w) * 0.006)) var(--ink); }
.sticky-canvas--retro .sticky-canvas__item.is-selected .sticky-note { outline: 0.45cqw dashed var(--ink); outline-offset: 0.9cqw; }
.sticky-canvas--retro .sticky-canvas__label { color: var(--ink); font-family: var(--font-primary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.9cqw; }
.sticky-canvas--retro .sticky-canvas__label img { border-radius: 0; }
.sticky-canvas--retro :is(.sticky-canvas__bar, .sticky-canvas__colors) {
  border-radius: 0; border: 0.5cqw solid var(--ink); box-shadow: 0.9cqw 0.9cqw 0 var(--ink);
}
.sticky-canvas--retro :is(.sticky-canvas__bar > button, .sticky-canvas__colors button, .sticky-canvas__swatch i) { border-radius: 0; }
/* A phone-sized canvas: the type floors (9-10 px) outgrow the notes, so the retro notes keep their
   tag, title and author stamp and drop the body and the stamp's text. */
@container (max-width: 440px) {
  .sticky-canvas--retro :is(.sticky-note__body, .sticky-note__meta, .sticky-note__edit, .sticky-note__read-more) { display: none; }
  .sticky-canvas--retro .sticky-note__foot { justify-content: flex-start; }
}