/* ============================================================================
   TransformerPath — Beta feedback widget
   ----------------------------------------------------------------------------
   Styles for the launcher and panel injected by tp-feedback.js. Uses the site's
   existing tokens, so it inherits light/dark without a second palette.

   Positioned bottom-right, above the fold of the footer, and deliberately
   modest: this is a Beta reporting channel, not a marketing interstitial. It
   never covers content on small screens because the panel is width-capped and
   scrolls internally.
   ========================================================================== */

#tpFbBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  padding: 10px 16px;
  min-height: 44px;                 /* touch target */
  font: 600 .86rem/1 var(--font-sans);
  color: var(--navy);
  background: var(--amber);
  border: 1px solid var(--amber-dark);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
#tpFbBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
#tpFbBtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

#tpFbBox {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 901;
  width: min(360px, calc(100vw - 36px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 16px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  font-family: var(--font-sans);
}
#tpFbBox label {
  display: block;
  margin: 10px 0 4px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
}
#tpFbBox label:first-of-type { margin-top: 0; }
#tpFbBox select,
#tpFbBox textarea,
#tpFbBox input[type="email"] {
  width: 100%;
  padding: 9px 10px;
  font: 400 .88rem/1.4 var(--font-sans);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
}
#tpFbBox textarea { resize: vertical; min-height: 84px; }
#tpFbBox select:focus-visible,
#tpFbBox textarea:focus-visible,
#tpFbBox input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.tpfb-opt { font-weight: 400; color: var(--muted); }

/* The captured context, shown so nobody wonders what they are reporting on. */
.tpfb-ctx {
  margin-top: 10px;
  padding: 7px 9px;
  font-size: .72rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 6px;
  word-break: break-word;
}

.tpfb-row { display: flex; gap: 8px; margin-top: 12px; }
.tpfb-send,
.tpfb-cancel {
  flex: 1;
  padding: 10px 12px;
  min-height: 44px;
  font: 600 .84rem/1 var(--font-sans);
  border-radius: 7px;
  cursor: pointer;
}
.tpfb-send { color: var(--navy); background: var(--amber); border: 1px solid var(--amber-dark); }
.tpfb-cancel { color: var(--text); background: transparent; border: 1px solid var(--border); }
.tpfb-send:hover { background: var(--amber-dark); }
.tpfb-cancel:hover { border-color: var(--muted); }
.tpfb-send:focus-visible,
.tpfb-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tpfb-msg { margin-top: 9px; font-size: .78rem; color: var(--muted); min-height: 1em; }
.tpfb-done { font-size: .92rem; color: var(--ink); line-height: 1.5; }
.tpfb-done span { font-size: .8rem; color: var(--muted); }

/* Keep the launcher clear of the mobile nav panel and thumb reach. */
@media (max-width: 600px) {
  #tpFbBtn { right: 12px; bottom: 12px; padding: 9px 14px; font-size: .8rem; }
  #tpFbBox { right: 12px; left: 12px; bottom: 64px; width: auto; }
}
/* Printing a page should not print a feedback button. */
@media print { #tpFbBtn, #tpFbBox { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #tpFbBtn { transition: none; } }