/* =========================================================================
   Phase 148 — Sub-beats
   Small stickies attached to the bottom edge of their parent beat. Rendered by
   corkboard-beats-module-phase5.js (the .sticky-subs block); this file is only
   the look. Delete both to remove the feature.
   ========================================================================= */

/* The parent sticky must not clip the overhang, and needs room for the strip.
   position:relative anchors the collapsed (.empty) strip's corner + button. */
.sticky-note:has(.sticky-subs) { position: relative; }
.sticky-note:has(.sticky-subs:not(.empty)) {
  padding-bottom: 6px;
  overflow: visible;
}

.sticky-subs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  /* Negative margins let the row sit ON the parent's bottom edge and overhang
     it slightly, so they read as stuck-on rather than boxed-in. */
  margin: 5px -4px -12px -4px;
  padding: 0 2px;
  min-height: 0;
}

/* With no subs the strip must cost ZERO layout height — otherwise every beat on
   the board grows by ~42px for an affordance most of them never use (and on
   touch the + is always visible, so it would hit every card). Float it into the
   sticky's bottom-right corner instead of reserving a row. */
.sticky-subs.empty {
  position: absolute;
  right: 6px;
  bottom: 6px;
  margin: 0;
  padding: 0;
  min-height: 0;
  gap: 0;
}

.sticky-sub {
  /* It's a real <button> (see the note in corkboard-beats-module-phase5.js) —
     so the UA button styles have to be stripped back to paper. */
  appearance: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  display: block;

  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 34px;
  padding: 5px 7px 5px;
  border-radius: 2px;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.22;
  color: rgba(0, 0, 0, .78);
  cursor: pointer;
  /* Its own paper shadow — this is what sells "a second, smaller sticky" rather
     than a tag chip on the first one. */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06) inset;
  transition: transform .12s ease, box-shadow .12s ease;
  transform-origin: top center;
  -webkit-tap-highlight-color: transparent;
}

/* A sliver of "tape" across the top edge, holding it to the parent. */
.sticky-sub-tape {
  position: absolute;
  top: -3px; left: 50%;
  width: 22px; height: 6px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  border-radius: 1px;
  pointer-events: none;
}

.sticky-sub-txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.sticky-sub:hover,
.sticky-sub:focus-visible {
  transform: translateY(-2px) rotate(0deg) !important;   /* beats the inline rotation */
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
  z-index: 20 !important;
  outline: none;
}
.sticky-sub:focus-visible { box-shadow: 0 5px 12px rgba(0,0,0,.3), 0 0 0 2px #2563eb; }

.sticky-sub-add {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border: 1px dashed rgba(0, 0, 0, .28);
  border-radius: 3px;
  background: rgba(255, 255, 255, .34);
  color: rgba(0, 0, 0, .5);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  /* Stay out of the way until the beat is hovered — otherwise every sticky
     wears a permanent ＋ and the board gets noisy. */
  opacity: 0;
  transition: opacity .14s ease, background .14s ease;
}
.sticky-note:hover .sticky-sub-add,
.sticky-note:focus-within .sticky-sub-add { opacity: 1; }
.sticky-sub-add:hover { background: rgba(255, 255, 255, .8); color: rgba(0,0,0,.8); }
.sticky-sub-add:focus-visible { opacity: 1; outline: 2px solid #2563eb; outline-offset: 1px; }

/* Touch has no hover: the ＋ must always be reachable, and the subs need real
   tap targets. */
@media (hover: none), (max-width: 760px) {
  .sticky-sub-add { opacity: 1; width: 26px; height: 26px; }
  .sticky-sub { padding: 6px 8px; font-size: .6rem; min-height: 26px; }
}

/* Dark mode: the stickies keep their paper colour (they're paper), but the
   dashed add-button needs to read against the dark cork. */
body.dark .sticky-sub-add {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
}
body.dark .sticky-sub-add:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Printing a board shouldn't show an affordance you can't click. */
@media print { .sticky-sub-add { display: none; } }