.fb-root {
  /* Self-contained palette, deliberately inheriting nothing from the host page.
     These were originally written as var(--ink, #eef2e4), var(--ink-2, …) etc.
     so the overlay could adopt a host site's tokens. That backfires here:
     this site's src/styles/tokens.css uses --ink and --ink-2 for page
     BACKGROUNDS, not text, so the overlay inherited near-black as its primary
     text colour and the comment composer rendered at 1.09:1, i.e. invisible.
     This is an overlay with its own visual language sitting on top of an
     arbitrary page. Do not reintroduce var() indirection to host tokens. */
  --fb-pop: #262c24;
  --fb-line: rgba(221, 236, 201, 0.09);
  --fb-ink: #eef2e4;
  --fb-ink2: #9aa593;
  --fb-soft: #a4ae9c;
  --fb-gold: #eaf66b;
  --fb-rust: #ef7d63;
  --fb-teal: #5fd39a;
  --fb-field: #1c201b;
  --fb-outer: #252a25;
  --fb-accent-ink: #252a25;
  --fb-gold-soft: rgba(234, 246, 107, 0.14);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fb-ink);
}
.fb-root, .fb-root * { box-sizing: border-box; }
.fb-root :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Hover highlight while picking */
.fb-hover {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  border: 2px dashed var(--fb-gold);
  background: var(--fb-gold-soft);
  border-radius: 4px;
  display: none;
}

/* Mode banner */
.fb-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--fb-ink);
  color: var(--fb-outer);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}
.fb-banner.fb-on { display: flex; }
.fb-banner svg { width: 14px; height: 14px; }
.fb-banner-x { margin-left: 4px; opacity: 0.7; display: flex; }
.fb-banner-x:hover { opacity: 1; }

/* Pins */
.fb-pin {
  position: fixed;
  z-index: 9995;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fb-pop);
  background: var(--fb-rust);
  color: var(--fb-ink);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease;
}
.fb-pin:hover { transform: scale(1.1); }
.fb-pin.fb-lost { opacity: 0.7; }
.fb-pin.fb-resolved {
  background: var(--fb-pop);
  border-color: var(--fb-teal);
  color: var(--fb-teal);
  opacity: 0.75;
}

/* Popovers (pin detail + composer) */
.fb-pop {
  position: fixed;
  z-index: 9997;
  width: 300px;
  border-radius: 12px;
  border: 1px solid var(--fb-line);
  background: var(--fb-pop);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  padding: 12px;
  display: none;
}
.fb-pop.fb-on { display: block; }
.fb-pop > * + * { margin-top: 8px; }
.fb-draft { width: 320px; z-index: 9998; }
.fb-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fb-pop-comment {
  margin: 0;
  font-size: 14px;
  color: var(--fb-ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-width: 0;
}
.fb-x { color: var(--fb-soft); flex-shrink: 0; display: flex; }
.fb-x:hover { color: var(--fb-ink); }
.fb-x svg, .fb-a svg { width: 16px; height: 16px; }
.fb-elline {
  margin: 0;
  font-size: 11px;
  color: var(--fb-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-prov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--fb-soft);
}
.fb-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fb-soft);
}
.fb-actions { display: flex; align-items: center; gap: 10px; }
.fb-act { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.fb-act svg { width: 12px; height: 12px; }
.fb-act-del { color: var(--fb-rust); }
.fb-act-del:hover { opacity: 0.8; }
.fb-act-res { color: var(--fb-teal); }
.fb-act-res:hover { opacity: 0.8; }
.fb-act-soft { color: var(--fb-soft); }
.fb-act-soft:hover { color: var(--fb-ink); }

/* Resolve-note strip inside the pin popover */
.fb-resnote { display: none; }
.fb-resnote.fb-on { display: block; }
.fb-resnote input {
  width: 100%;
  font: inherit;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--fb-line);
  background: var(--fb-field);
  color: var(--fb-ink);
  padding: 6px 8px;
  outline: none;
}
.fb-resnote input:focus { box-shadow: 0 0 0 1px var(--fb-teal); }
.fb-resnote-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Composer */
.fb-ta {
  width: 100%;
  font: inherit;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--fb-line);
  background: var(--fb-field);
  color: var(--fb-ink);
  padding: 8px;
  resize: vertical;
  outline: none;
}
.fb-ta:focus { box-shadow: 0 0 0 1px var(--fb-gold); }
.fb-ta::placeholder { color: var(--fb-soft); }
.fb-draft-btns { display: flex; justify-content: flex-end; gap: 8px; }
.fb-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}
.fb-btn-cancel { color: var(--fb-ink2); }
.fb-btn-cancel:hover { background: var(--fb-field); }
.fb-btn-save {
  background: var(--fb-gold);
  color: var(--fb-accent-ink);
  font-weight: 600;
}
.fb-btn-save:disabled { opacity: 0.5; cursor: default; }

/* History panel */
.fb-panel {
  position: fixed;
  right: 12px;
  bottom: 64px;
  z-index: 9997;
  width: 340px;
  max-height: 60vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--fb-line);
  background: var(--fb-pop);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  display: none;
}
.fb-panel.fb-on { display: block; }
.fb-panel-head {
  position: sticky;
  top: 0;
  background: var(--fb-pop);
  border-bottom: 1px solid var(--fb-line);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fb-panel-title { font-size: 12px; font-weight: 600; color: var(--fb-ink); }
.fb-who {
  padding: 6px 12px; border-bottom: 1px solid var(--fb-line);
  display: flex; align-items: center; gap: 8px;
}
.fb-who label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fb-soft); display: flex; align-items: center; gap: 8px; width: 100%;
}
.fb-who input {
  flex: 1; font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
  padding: 4px 8px; border-radius: 6px; color: var(--fb-ink);
  border: 1px solid var(--fb-line); background: var(--fb-field);
}
.fb-who input:focus { outline: none; border-color: var(--fb-gold); }
.fb-panel-tools { display: flex; align-items: center; gap: 10px; }
.fb-tool { color: var(--fb-soft); display: flex; }
.fb-tool:hover { color: var(--fb-ink); }
.fb-tool svg { width: 14px; height: 14px; }
.fb-empty { padding: 16px; font-size: 12px; color: var(--fb-soft); margin: 0; }
.fb-panel ul { list-style: none; margin: 0; padding: 0; }
.fb-panel li { padding: 12px; }
.fb-panel li + li { border-top: 1px solid var(--fb-line); }
.fb-panel li > * + * { margin-top: 4px; }
.fb-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fb-row-comment { margin: 0; font-size: 12px; color: var(--fb-ink); overflow-wrap: break-word; min-width: 0; }
.fb-row-comment.fb-done { color: var(--fb-soft); text-decoration: line-through; }
.fb-chip {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--fb-gold-soft);
  color: var(--fb-ink2);
}
.fb-chip.fb-done { background: var(--fb-field); color: var(--fb-soft); }
.fb-note { margin: 0; font-size: 11px; color: var(--fb-soft); font-style: italic; }
.fb-row-foot { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--fb-soft); }
.fb-row-foot .fb-act { max-width: 170px; }
.fb-row-foot .fb-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FAB cluster */
.fb-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9996;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.fb-fab.fb-dragging { cursor: grabbing; }
.fb-fab-hide {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fb-line);
  background: var(--fb-pop);
  color: var(--fb-soft);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fb-fab:hover .fb-fab-hide { opacity: 1; }
.fb-fab-hide:hover { color: var(--fb-ink); }
.fb-fab-hide svg { width: 12px; height: 12px; }
.fb-fab-count {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(234, 246, 107, 0.45);
  background: var(--fb-pop);
  color: var(--fb-gold);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}
.fb-fab-count.fb-on { display: flex; }
.fb-fab-count:hover { background: var(--fb-field); border-color: var(--fb-gold); }
.fb-fab-count svg { width: 14px; height: 14px; }

/* The entry point to the whole tool, so it has to be findable at a glance.
   Deliberately the tool's lime rather than the site's red: this site is full
   of red CTAs, so a red bubble would read as part of the design instead of as
   something sitting on top of it. Nothing on the site uses this colour.
   44px is also the minimum comfortable touch target. */
.fb-fab-main {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fb-gold);
  background: var(--fb-gold);
  color: var(--fb-accent-ink);
  box-shadow: 0 4px 16px rgba(234, 246, 107, 0.38),
              0 10px 15px -3px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
}
.fb-fab-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(234, 246, 107, 0.55),
              0 10px 15px -3px rgba(0, 0, 0, 0.45);
}
/* Annotate mode on: flip to bone so the active state is unmistakable
   against the resting lime. */
.fb-fab-main.fb-on {
  background: var(--fb-ink);
  color: var(--fb-outer);
  border-color: var(--fb-ink);
  box-shadow: 0 4px 16px rgba(242, 238, 233, 0.32),
              0 10px 15px -3px rgba(0, 0, 0, 0.45);
}
.fb-fab-main svg { width: 20px; height: 20px; }

.fb-file { display: none; }

.fb-copy {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  width: min(560px, 90vw);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--fb-line);
  background: var(--fb-pop);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}
.fb-copy textarea {
  width: 100%;
  height: 40vh;
  margin: 8px 0;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid var(--fb-line);
  background: var(--fb-field);
  color: var(--fb-ink);
  padding: 8px;
  resize: vertical;
}
.fb-copy-note { margin: 0; font-size: 12px; color: var(--fb-soft); }
.fb-tool-del:hover { color: var(--fb-rust); }
.fb-tool-del.fb-armed { color: var(--fb-rust); animation: fb-pulse 0.9s ease-in-out infinite; }
@keyframes fb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* The right-side Comment tab is the single entry point in the deck, so the
   module's floating bubble stays out of the way. */

@media print {
  .fb-root { display: none !important; }
}