/* Shared styles for the floating sticky-note widget (public/js/sticky-notes-widget.js).
   Used across every interactive workbook page and printable week page. */

.sticky-fab-wrap { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.sticky-fab { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #F4A93B; border: none; font-size: 1.35rem; box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; }
.sticky-color-picker { display: flex; gap: 0.5rem; background: #fff; padding: 0.5rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.sticky-color-picker[hidden] { display: none; }
.sticky-color-dot { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid rgba(0,0,0,0.12); cursor: pointer; }
.sticky-color-dot[data-color="yellow"] { background: #FFF3B0; }
.sticky-color-dot[data-color="pink"] { background: #FBCFE8; }
.sticky-color-dot[data-color="blue"] { background: #BFDBFE; }
.sticky-color-dot[data-color="green"] { background: #BBF7D0; }
.sticky-color-dot[data-color="orange"] { background: #FED7AA; }

/* Below the print pages' own sticky bars (.ctrl z-index:200, .tab-nav
   z-index:190), so those stay clickable/visible wherever a note would
   otherwise sit on top of them - notes still render above ordinary page
   content everywhere else. */
.sticky-fixed-layer { position: fixed; inset: 0; pointer-events: none; z-index: 150; }
.sticky-fixed-layer .sticky-note { pointer-events: auto; }

/* Below the site's sticky <header> (z-index:100) and every module's
   unit/lesson "table of contents" dropdown panel (z-index:30) - otherwise
   a note scrolled to where the header currently sits, or one that happens
   to be positioned where a dropdown opens, renders on top of it instead
   of the other way around. */
.sticky-note { position: absolute; width: 190px; min-height: 160px; border-radius: 4px; box-shadow: 3px 5px 12px rgba(0,0,0,0.28); z-index: 20; display: flex; flex-direction: column; font-family: inherit; }
.sticky-note[data-color="yellow"] { background: #FFF3B0; }
.sticky-note[data-color="pink"] { background: #FBCFE8; }
.sticky-note[data-color="blue"] { background: #BFDBFE; }
.sticky-note[data-color="green"] { background: #BBF7D0; }
.sticky-note[data-color="orange"] { background: #FED7AA; }
.sticky-note-handle { height: 1.5rem; cursor: grab; display: flex; align-items: center; justify-content: flex-end; touch-action: none; }
.sticky-note-handle:active { cursor: grabbing; }
.sticky-note-delete { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; opacity: 0.5; padding: 0.15rem 0.5rem; }
.sticky-note-delete:hover { opacity: 1; }
.sticky-note-text { flex: 1; border: none; background: transparent; resize: none; font: inherit; font-size: 0.85rem; padding: 0 0.65rem 0.65rem; color: #3A3733; outline: none; }

@media print {
  .sticky-fab-wrap, .sticky-fixed-layer { display: none !important; }
}