/* ===================================
   STICKY NOTE MOLECULE
   ===================================
   Warm post-it card: yellow fill, soft shadow, folded corner.
   Flow mode = tidy stack with a subtle tilt.
   Board mode (.sticky-note--positioned) = absolute, drag-positioned, resizable.
   All values from design tokens; the post-it palette uses the --sticky-* tokens.
*/

.sticky-note {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: var(--space-20);
    padding: var(--space-3);
    background: var(--sticky-bg);
    color: var(--sticky-text);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    /* Subtle tilt for a hand-pinned feel (small literal deg, per Card precedent) */
    transform: rotate(-0.6deg);
    transition: transform var(--duration-200) var(--easing-out),
                box-shadow var(--duration-200) var(--easing-out);
}

/* Alternate the tilt so a wall of flow notes looks naturally scattered */
.sticky-note:nth-child(even) { transform: rotate(0.7deg); }
.sticky-note:nth-child(3n) { transform: rotate(-0.3deg); }

.sticky-note-body {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
}

.sticky-note-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--sticky-text-muted);
    padding-right: var(--space-5); /* leave room for the folded corner */
}

.sticky-note-author { font-weight: var(--font-weight-semibold); }

/* Folded corner -- a real element (so it can be a grab target) */
.sticky-note-fold {
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--space-5);
    height: var(--space-5);
    background: var(--sticky-fold);
    border-top-left-radius: var(--border-radius-md);
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.08);
}

.sticky-note--clickable { cursor: pointer; }

.sticky-note--clickable:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: var(--shadow-md);
}

.sticky-note--clickable:focus-visible {
    outline: var(--border-width-2) solid var(--color-primary);
    outline-offset: var(--space-0_5);
}

/* ---- Board mode: absolute, draggable, resizable -------------------- */

.sticky-note--positioned {
    position: absolute;
    left: var(--note-x);
    top: var(--note-y);
    width: var(--note-w);
    height: var(--note-h);
    margin: 0;
    transform: none; /* precise placement beats the decorative tilt on a board */
    touch-action: none; /* let pointer drag work on touch without scrolling */
}

.sticky-note--positioned:nth-child(even),
.sticky-note--positioned:nth-child(3n) { transform: none; }

.sticky-note--draggable { cursor: grab; }
.sticky-note--draggable.is-dragging {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
    z-index: 5;
    opacity: 0.95;
}

/* The folded corner is the resize grip in board mode */
.sticky-note--positioned .sticky-note-fold[data-role="resize-note"] {
    cursor: nwse-resize;
    width: var(--space-6);
    height: var(--space-6);
}
.sticky-note--positioned.is-resizing { z-index: 5; box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
    .sticky-note,
    .sticky-note:nth-child(even),
    .sticky-note:nth-child(3n),
    .sticky-note--clickable:hover {
        transform: none;
        transition: none;
    }
}