/*
 * Bond Witnessed Open Receipt — pre-ceremony toggle styling (Phase 8f).
 *
 * gap-BOND.md §4 Add-On 5. Renders the small "Generate verified opening
 * receipt" button that lives next to the Phase 8e "Open live with
 * sender" toggle on bond-interface.html. Off by default per minimal-
 * data principle. When toggled on, the recipient's per-device Ed25519
 * key signs the 700ms cleavage attentiveness proof; the sender can
 * later request verification via verifyWitnessedReceipt callable.
 *
 * Locked to the rest of the Bond visual language:
 *   - Cream-on-walnut palette (#f3e6c4 / #2a1f17) per E v2.
 *   - Same border + radius geometry as the live-open toggle so the
 *     two read as a pair.
 *   - Distinct accent (forest-green seal) when on, to disambiguate
 *     from the live-open toggle's red "live" cue.
 *   - 44px tap target on touch.
 *   - Disabled state with explanatory tooltip when WebCrypto Ed25519
 *     is unavailable (older Firefox, older iOS Safari).
 */

.bondc-letter-witness-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 8px 16px;
  min-height: 44px;
  background: rgba(20, 15, 10, 0.72);
  color: #f3e6c4;
  border: 1px solid rgba(180, 140, 80, 0.45);
  border-radius: 10px;
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}

.bondc-letter-witness-toggle:hover {
  background: rgba(28, 22, 14, 0.85);
  border-color: rgba(200, 170, 110, 0.65);
}

.bondc-letter-witness-toggle:active {
  transform: scale(0.98);
}

.bondc-letter-witness-toggle:focus-visible {
  outline: 2px solid rgba(220, 190, 130, 0.9);
  outline-offset: 2px;
}

.bondc-letter-witness-toggle.is-on {
  background: rgba(20, 30, 22, 0.82);
  border-color: rgba(70, 140, 90, 0.7);
  color: #cfeacc;
}

.bondc-letter-witness-toggle.is-on:hover {
  background: rgba(28, 40, 30, 0.92);
  border-color: rgba(95, 175, 110, 0.85);
}

.bondc-letter-witness-toggle[disabled],
.bondc-letter-witness-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
}

.bondc-letter-witness-toggle[disabled]:hover,
.bondc-letter-witness-toggle.is-disabled:hover {
  background: rgba(20, 15, 10, 0.72);
  border-color: rgba(180, 140, 80, 0.45);
}

.bondc-letter-witness-toggle .bondc-witness-toggle-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-block;
}

.bondc-letter-witness-toggle .bondc-witness-toggle-label {
  display: inline-block;
  white-space: nowrap;
}

/* Tooltip / hint surface for the explanatory copy under the toggle.
   Only renders when present in the DOM; the JS injection chooses
   whether to show it (off / on / unsupported). */
.bondc-letter-witness-hint {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(243, 230, 196, 0.62);
  line-height: 1.4;
  margin-top: 6px;
  margin-left: 12px;
  max-width: 320px;
}

.bondc-letter-witness-hint strong {
  color: rgba(243, 230, 196, 0.82);
  font-weight: 600;
}

@media (max-width: 540px) {
  .bondc-letter-witness-toggle {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }
  .bondc-letter-witness-hint {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bondc-letter-witness-toggle {
    transition: none;
  }
  .bondc-letter-witness-toggle:active {
    transform: none;
  }
}