/* Tavern Chronicle lobby sticky note (always-visible link → /chronicle).
   Standalone stylesheet loaded by the terminal layout. Kept OUT of the
   terminal/ bundle on purpose so the lobby affordance doesn't grow the
   terminal CSS rule-block count. Reuses the .postit visual classes; only
   positioning lives here. */
.chronicle-note {
  position: fixed;
  left: var(--space-4, 1rem);
  /* #10569: sit ABOVE the input area, never over it — this is a SPATIAL fix, not a
     z-index or pointer-events one. `.input-area` is pinned to the bottom of the
     narrative panel (just above the hotbar) and is capped at min(42vh, 320px) by
     #10530. When the DM's action dock inflated it, a note anchored just above the
     hotbar landed on top of the dock's contextual offers and — being a VISIBLE,
     interactive card — ate their clicks (measured 2026-08-11: elementFromPoint over a
     `.action-dock__suggest` returned `.chronicle-note`). A stacking fix cannot solve
     this: the note is `position:fixed` in #postit-portal (a body child, root z=1) while
     the dock is buried inside the isolated `.zone--main` stacking context (root z=0),
     so nothing on the dock side can be raised above the note, and dropping the note
     below `.zone--main` would hide it behind the opaque panel. #10515's control also
     requires a visible post-it to catch its OWN click, so pointer-events is off the
     table. Clearing the input area's maximum height is the only fix that keeps the note
     visible AND leaves the dock clickable. Keep this offset in sync with the
     `.input-area` max-height in organisms/narrative/_input.css. */
  bottom: calc(var(--hotbar-height, 56px) + min(42vh, 320px) + var(--space-4, 1rem));
  width: 13rem;
  max-width: 42vw;
  z-index: var(--z-raised, 50);
  text-decoration: none;
  cursor: pointer;
  transform: rotate(2deg);
  transition: transform var(--timing-fast, 120ms) var(--ease-default, ease);
}
.chronicle-note:hover {
  transform: rotate(2deg) translateY(-3px) scale(1.03);
  text-decoration: none;
}
/* Inner link carries the clickable card content; the wrapper owns the
   .postit visual + the dismiss button. Reset link styling so the card looks
   unchanged from the previous single-<a> markup. */
.chronicle-note__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.chronicle-note__link:hover { text-decoration: none; }
.chronicle-note .postit__command { cursor: pointer; }

/* Desktop affordance only — the chronicle is reachable at /chronicle directly. */
@media (max-width: 767px) {
  .chronicle-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chronicle-note,
  .chronicle-note:hover { transform: rotate(2deg); }
}