/* ==========================================================================
   AWS COMMONPLACE — STICKY MARGIN NOTES (FOOTNOTES) ADD-ON STYLES
   Pair with: notes-sticky-footnote.js
   Load on BOTH the editor page and the reading page.
   Markup saved inside body_html:
     <sup class="note-fn-ref" data-fn="ID" data-fn-side="left|right">1</sup>
     <div class="note-sticky" data-fn="ID" data-side="left|right"> ... </div>
   ========================================================================== */

:root {
  --note-sticky-w: 210px;
  --note-sticky-gap: 32px;
  --note-sticky-bg: #f8ecb6;
  --note-sticky-bg-end: #f3e19a;
  --note-sticky-ink: #3a3420;
  --note-sticky-accent: #8f2c2b;
  --note-sticky-edge: rgba(122, 96, 28, 0.24);
}

@media (max-width: 1499px) {
  :root {
    --note-sticky-w: 160px;
    --note-sticky-gap: 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Reference number inside the main text                              */
/* ------------------------------------------------------------------ */

.note-fn-ref {
  display: inline;
  margin: 0 0.06em 0 0.12em;
  padding: 0.04em 0.34em;
  border-radius: 0.5em;
  background: rgba(143, 44, 43, 0.1);
  color: var(--note-sticky-accent);
  font-size: 0.68em;
  font-style: normal;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 0;
  text-indent: 0;
  text-decoration: none;
  vertical-align: super;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}

.note-fn-ref:hover,
.note-fn-ref.is-linked {
  background: var(--note-sticky-accent);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Sticky note (default = compact / inline, safe on small screens)    */
/* ------------------------------------------------------------------ */

.note-sticky {
  position: relative;
  display: block;
  box-sizing: border-box;
  float: none;
  clear: both;
  width: auto;
  max-width: 100%;
  margin: 0.5em 0 1em;
  padding: 0 0.85em 0.75em;
  border: 1px solid var(--note-sticky-edge);
  border-radius: 3px 3px 8px 3px;
  background: linear-gradient(
    160deg,
    var(--note-sticky-bg) 0%,
    var(--note-sticky-bg-end) 100%
  );
  box-shadow:
    0 1px 1px rgba(70, 56, 20, 0.12),
    0 10px 18px -10px rgba(70, 56, 20, 0.35);
  color: var(--note-sticky-ink);
  font-size: 0.74em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-indent: 0;
  overflow-wrap: anywhere;
  transition:
    box-shadow 0.16s ease,
    outline-color 0.16s ease;
}

.note-sticky:hover,
.note-sticky.is-linked {
  box-shadow:
    0 0 0 2px rgba(143, 44, 43, 0.35),
    0 10px 18px -10px rgba(70, 56, 20, 0.35);
}

.note-sticky:focus-within {
  box-shadow:
    0 0 0 2px rgba(143, 44, 43, 0.55),
    0 10px 18px -10px rgba(70, 56, 20, 0.35);
}

/* Head: number badge + editor-only tools */

.note-sticky-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin: 0 -0.85em 0.5em;
  padding: 0.3em 0.85em;
  border-bottom: 1px dashed rgba(122, 96, 28, 0.3);
  border-radius: 3px 3px 0 0;
  background: rgba(122, 96, 28, 0.08);
  line-height: 1.2;
  -webkit-user-select: none;
  user-select: none;
}

.note-sticky-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--note-sticky-accent);
  color: #fff;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* Editor-only controls are hidden everywhere else (reading page). */
.note-sticky-tools {
  display: none;
}

#editorBody .note-sticky-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.note-sticky-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  border: 1px solid rgba(122, 96, 28, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--note-sticky-ink);
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
}

.note-sticky-tool:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--note-sticky-accent);
}

/* Body: typed exactly like the main text */

.note-sticky-body {
  min-height: 1.5em;
  outline: none;
}

#editorBody .note-sticky-body {
  cursor: text;
}

.note-sticky-body > :first-child {
  margin-top: 0;
}

.note-sticky-body > :last-child {
  margin-bottom: 0;
}

.note-sticky-body p,
#editorBody .note-sticky-body p {
  margin: 0 0 0.5em;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  text-indent: 0;
}

.note-sticky-body ul,
.note-sticky-body ol,
#editorBody .note-sticky-body ul,
#editorBody .note-sticky-body ol {
  margin: 0 0 0.5em;
  padding-left: 1.3em;
  font-size: inherit;
}

.note-sticky-body li,
#editorBody .note-sticky-body li {
  font-size: inherit;
  line-height: inherit;
}

.note-sticky-body h1,
.note-sticky-body h2,
.note-sticky-body h3,
#editorBody .note-sticky-body h1,
#editorBody .note-sticky-body h2,
#editorBody .note-sticky-body h3 {
  margin: 0 0 0.4em;
  font-size: 1.15em;
  line-height: 1.25;
}

.note-sticky-body blockquote,
#editorBody .note-sticky-body blockquote {
  margin: 0 0 0.5em;
  padding-left: 0.7em;
  border-left: 3px solid rgba(122, 96, 28, 0.35);
  font-size: inherit;
}

.note-sticky-body img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* Margin layout (left / right of the main text)                      */
/* Same technique as classic sidenotes: the float has a negative      */
/* margin so it sits outside the text column and never wraps text.    */
/* ------------------------------------------------------------------ */

@media (min-width: 1280px) {
  .note-sticky[data-side="right"] {
    float: right;
    clear: right;
    width: var(--note-sticky-w);
    margin: 0.35em calc(-1 * (var(--note-sticky-w) + var(--note-sticky-gap)))
      0.9em 0;
  }

  .note-sticky[data-side="left"] {
    float: left;
    clear: left;
    width: var(--note-sticky-w);
    margin: 0.35em 0 0.9em
      calc(-1 * (var(--note-sticky-w) + var(--note-sticky-gap)));
  }
}

/* The JS measures the real free margin and decides (overrides media query). */

[data-fn-layout="float"] > .note-sticky[data-side="right"] {
  float: right;
  clear: right;
  width: var(--note-sticky-w);
  margin: 0.35em calc(-1 * (var(--note-sticky-w) + var(--note-sticky-gap)))
    0.9em 0;
}

[data-fn-layout="float"] > .note-sticky[data-side="left"] {
  float: left;
  clear: left;
  width: var(--note-sticky-w);
  margin: 0.35em 0 0.9em
    calc(-1 * (var(--note-sticky-w) + var(--note-sticky-gap)));
}

[data-fn-layout="compact"] > .note-sticky[data-side] {
  float: none;
  clear: both;
  width: auto;
  margin: 0.5em 0 1em;
}

/* ------------------------------------------------------------------ */
/* Highlight flash when jumping between number and note               */
/* ------------------------------------------------------------------ */

@keyframes note-sticky-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 44, 43, 0.55);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(143, 44, 43, 0);
  }
}

.note-sticky.is-flash,
.note-fn-ref.is-flash {
  animation: note-sticky-flash 1.1s ease-out 1;
}

/* ------------------------------------------------------------------ */
/* Toolbar buttons (editor)                                           */
/* ------------------------------------------------------------------ */

.note-fn-launch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.note-fn-launch-btn .note-fn-btn-dir {
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
}

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

  .note-sticky.is-flash,
  .note-fn-ref.is-flash {
    animation: none;
  }
}

@media print {
  .note-sticky {
    box-shadow: none;
    break-inside: avoid;
  }
}