/* Solvent Futures — feedback widget
   Loosely matches Direction B ("Calculator Clarity") from
   website-design-direction.md: Space Grotesk / IBM Plex Mono, near-white
   background, deep green ink, primary green accents. Adjust the custom
   properties below if the live site's tokens differ. */

:root {
  --sf-fb-bg: #fbfcfb;
  --sf-fb-ink: #10231d;
  --sf-fb-green: #0d5c46;
  --sf-fb-border: #dbe6e0;
  --sf-fb-muted: #6b7d75;
  --sf-fb-error: #a3211c;
  --sf-fb-error-bg: #fdeceb;
  --sf-fb-font: "Space Grotesk", Helvetica, Arial, sans-serif;
  --sf-fb-mono: "IBM Plex Mono", ui-monospace, monospace;
}

.sf-fb-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  font-family: var(--sf-fb-font);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--sf-fb-green);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 35, 29, 0.18);
}

.sf-fb-trigger:hover {
  filter: brightness(1.08);
}

/* v2.2 fix: the widget hides the overlay via the HTML `hidden` attribute,
   but an author rule like the display:flex below OVERRIDES the browser's
   built-in [hidden] → display:none. The tool's style.css happens to reset
   [hidden] itself; the site's pages don't — so without this rule the panel
   showed open on page load there and could never be closed. */
.sf-fb-overlay[hidden] {
  display: none !important;
}

.sf-fb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 35, 29, 0.35);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
}

.sf-fb-panel {
  width: 100%;
  max-width: 380px;
  background: var(--sf-fb-bg);
  border: 1px solid var(--sf-fb-border);
  border-radius: 12px;
  padding: 20px;
  font-family: var(--sf-fb-font);
  color: var(--sf-fb-ink);
  box-shadow: 0 12px 32px rgba(16, 35, 29, 0.24);
  max-height: 85vh;
  overflow-y: auto;
}

.sf-fb-panel h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.sf-fb-panel p.sf-fb-sub {
  font-family: var(--sf-fb-mono);
  font-size: 12px;
  color: var(--sf-fb-muted);
  margin: 0 0 16px;
}

.sf-fb-field {
  margin-bottom: 14px;
}

.sf-fb-field label {
  display: block;
  font-size: 12px;
  font-family: var(--sf-fb-mono);
  color: var(--sf-fb-muted);
  margin-bottom: 6px;
}

.sf-fb-field select,
.sf-fb-field textarea,
.sf-fb-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sf-fb-font);
  font-size: 14px;
  color: var(--sf-fb-ink);
  border: 1px solid var(--sf-fb-border);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.sf-fb-field textarea {
  min-height: 90px;
  resize: vertical;
}

/* Honeypot — visually hidden but present in the DOM and focusable order,
   which is what actually fools naive bots; display:none is often skipped
   by form-fillers. Screen readers skip it via aria-hidden + tabindex. */
.sf-fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sf-fb-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.sf-fb-btn {
  font-family: var(--sf-fb-font);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--sf-fb-border);
  background: #fff;
  color: var(--sf-fb-ink);
}

.sf-fb-btn-primary {
  background: var(--sf-fb-green);
  border-color: var(--sf-fb-green);
  color: #fff;
}

.sf-fb-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.sf-fb-msg {
  font-size: 13px;
  margin-top: 10px;
}

.sf-fb-msg.sf-fb-error {
  color: var(--sf-fb-error);
  background: var(--sf-fb-error-bg);
  border-radius: 6px;
  padding: 8px 10px;
}

.sf-fb-msg.sf-fb-success {
  color: var(--sf-fb-green);
}

.sf-fb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--sf-fb-muted);
}

.sf-fb-panel {
  position: relative;
}

/* Solvent Futures — feedback widget: annotate-mode styles (v3, #67).
   APPEND this whole block to the END of feedback-widget.css in both
   installed locations (tool static/ and Website\deploy) — the base file
   is unchanged. Uses the same custom properties defined at the top of
   feedback-widget.css. */

/* Standing rule (#62 v2.2 lesson): every element we hide via the HTML
   `hidden` attribute gets an explicit reset, because author display
   rules override the browser's built-in [hidden] → display:none. */
.sf-an-hoverbox[hidden],
.sf-an-tray[hidden],
.sf-an-note[hidden],
.sf-an-review[hidden],
.sf-an-note-quote[hidden] {
  display: none !important;
}

body.sf-an-active,
body.sf-an-active * {
  cursor: crosshair !important;
}

.sf-an-hoverbox {
  position: fixed;
  z-index: 9996;
  pointer-events: none;
  border: 2px dashed var(--sf-fb-green);
  background: rgba(13, 92, 70, 0.08);
  border-radius: 4px;
}

.sf-an-tray {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sf-fb-mono);
  font-size: 12px;
  color: #fff;
  background: var(--sf-fb-ink);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(16, 35, 29, 0.28);
}

.sf-an-btn {
  font-family: var(--sf-fb-font);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer !important;
}

.sf-an-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sf-an-note {
  position: fixed;
  z-index: 10000;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--sf-fb-bg);
  border: 1px solid var(--sf-fb-border);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--sf-fb-font);
  color: var(--sf-fb-ink);
  box-shadow: 0 12px 32px rgba(16, 35, 29, 0.24);
  cursor: auto !important;
}

.sf-an-note * {
  cursor: auto !important;
}

.sf-an-note button {
  cursor: pointer !important;
}

.sf-an-note-target {
  font-family: var(--sf-fb-mono);
  font-size: 11px;
  color: var(--sf-fb-muted);
  margin-bottom: 8px;
  word-break: break-all;
  max-height: 60px;
  overflow: hidden;
}

.sf-an-note-quote {
  font-size: 12px;
  color: var(--sf-fb-ink);
  background: rgba(13, 92, 70, 0.07);
  border-left: 3px solid var(--sf-fb-green);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.sf-an-note-text {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sf-fb-font);
  font-size: 14px;
  color: var(--sf-fb-ink);
  border: 1px solid var(--sf-fb-border);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  min-height: 70px;
  resize: vertical;
  margin-bottom: 10px;
}

.sf-an-review .sf-fb-panel {
  max-width: 520px;
}

.sf-an-review-page {
  font-family: var(--sf-fb-mono);
  font-size: 11px;
  color: var(--sf-fb-green);
  margin: 14px 0 6px;
  word-break: break-all;
}

.sf-an-review-item {
  position: relative;
  border: 1px solid var(--sf-fb-border);
  border-radius: 8px;
  padding: 10px 34px 10px 12px;
  margin-bottom: 8px;
  background: #fff;
}

.sf-an-review-sel {
  font-family: var(--sf-fb-mono);
  font-size: 11px;
  color: var(--sf-fb-muted);
  word-break: break-all;
  margin-bottom: 4px;
}

.sf-an-review-quote {
  font-size: 12px;
  border-left: 3px solid var(--sf-fb-green);
  padding-left: 8px;
  margin-bottom: 4px;
}

.sf-an-review-note {
  font-size: 13px;
}

.sf-an-review-del {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--sf-fb-muted);
}