/* VENDORED from feedback-clip (js/feedback-clip themes/base.css).
   Commit ead4ad7c35ac0dc0d799fe820ee1bdf5ca2a9527, 2026-08-18.
   Sparke's site has no bundler, so the source is copied verbatim. Do not edit
   here: change it upstream and re-copy. Sparke's --fc-* token mapping lives at
   the end of assets/site.css. */

/* ---------------------------------------------------------------------------
   feedback-clip - base stylesheet (structure only)

   Every colour, font, radius and shadow comes from a --fc-* custom property
   with a neutral fallback, so a host site can rebrand the whole component by
   setting a handful of variables. Nothing here hard-codes a brand colour.

   Variables (set these on :root, or on any ancestor of the clip)
     --fc-bg               page-level background used behind page mode
     --fc-surface          panel background
     --fc-text             primary text
     --fc-text-muted       subheadings, fine print, placeholders
     --fc-accent           submit button background, focus ring
     --fc-accent-contrast  text on the accent colour
     --fc-border           input and panel borders
     --fc-radius           corner radius
     --fc-font             font stack
     --fc-error            error text
     --fc-success          success text
     --fc-backdrop         dialog backdrop
     --fc-shadow           dialog and panel shadow

   Layout rules this file guarantees
     - the status line always occupies its space, so an error appearing moves
       nothing on the page
     - the submit button keeps a stable size while sending
     - the fine print reserves its own line
     - the compact signup row wraps rather than shrinking below a usable width
--------------------------------------------------------------------------- */

.fc {
  --_bg: var(--fc-bg, #ffffff);
  --_surface: var(--fc-surface, #ffffff);
  --_text: var(--fc-text, #0f172a);
  --_muted: var(--fc-text-muted, #64748b);
  --_accent: var(--fc-accent, #0f172a);
  --_accent-contrast: var(--fc-accent-contrast, #ffffff);
  --_border: var(--fc-border, #e2e8f0);
  --_radius: var(--fc-radius, 10px);
  --_font: var(--fc-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  --_error: var(--fc-error, #b91c1c);
  --_success: var(--fc-success, #15803d);
  --_backdrop: var(--fc-backdrop, rgba(15, 23, 42, 0.55));
  --_shadow: var(--fc-shadow, 0 18px 48px rgba(15, 23, 42, 0.18));

  font-family: var(--_font);
  color: var(--_text);
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
}

.fc *,
.fc *::before,
.fc *::after {
  box-sizing: inherit;
}

/* ------------------------------------------------------------------ panel */

.fc-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

.fc-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-heading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--_text);
}

.fc-sub {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--_muted);
}

/* ------------------------------------------------------------------- form */

.fc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.fc-form[hidden] {
  display: none;
}

.fc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fc-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--_muted);
}

.fc-input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  color: var(--_text);
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.fc-input::placeholder {
  color: var(--_muted);
  opacity: 0.8;
}

.fc-input:focus-visible {
  outline: none;
  border-color: var(--_accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 25%, transparent);
}

.fc-input[aria-invalid="true"] {
  border-color: var(--_error);
}

.fc-textarea {
  resize: vertical;
  min-height: 96px;
}

/* ---------------------------------------------------------------- actions */

.fc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-submit,
.fc-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  font: inherit;
  font-weight: 600;
  color: var(--_accent-contrast);
  background: var(--_accent);
  border: 1px solid transparent;
  border-radius: var(--_radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.fc-submit:hover,
.fc-trigger:hover {
  opacity: 0.9;
}

.fc-submit:focus-visible,
.fc-trigger:focus-visible,
.fc-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

.fc-submit[disabled] {
  cursor: default;
  opacity: 0.72;
}

/* The label sits in its own span so the busy indicator can share the box
   without changing the button's intrinsic width. */
.fc-submit-label {
  display: inline-block;
}

.fc-submit.fc-is-sending .fc-submit-label {
  opacity: 0.75;
}

/* ------------------------------------------- status, fine print, honeypot */

/* Reserved space: this element is always in the flow at a fixed minimum
   height, so showing or clearing an error never shifts the layout. */
.fc-status {
  min-height: 20px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--_error);
}

.fc-error-text {
  color: var(--_error);
}

.fc-fallback {
  color: var(--_error);
  text-decoration: underline;
}

.fc-fine {
  margin: 0;
  min-height: 18px;
  font-size: 0.75rem;
  line-height: 18px;
  color: var(--_muted);
}

/* Off screen rather than display:none, so bots that skip unrendered fields
   still fill it in. Never focusable, never announced. */
.fc-hp,
.fc-hp-wrap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- success */

.fc-done {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: 0.9375rem;
  color: var(--_success);
}

.fc-done[hidden] {
  display: none;
}

.fc-done-text {
  margin: 0;
  outline: none;
}

.fc-done-in {
  animation: fc-fade 0.16s ease-out;
}

@keyframes fc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------ compact signup row */

/* One line on wide viewports, stacked on narrow ones. The button keeps its
   own width so the input, not the button, absorbs the space. */
.fc-compact .fc-form-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.fc-compact .fc-field {
  flex: 1 1 220px;
  min-width: 200px;
}

.fc-compact .fc-actions {
  flex: 0 0 auto;
}

.fc-compact .fc-input {
  min-height: 42px;
}

/* Status and fine print always sit on their own full-width line below the
   row, with their space reserved up front. */
.fc-compact .fc-status,
.fc-compact .fc-fine {
  flex: 1 0 100%;
  width: 100%;
}

.fc-compact .fc-done {
  min-height: 42px;
}

/* -------------------------------------------------------------- modal mode */

.fc-mode-modal .fc-dialog {
  /* Assert the UA's auto-centring: host CSS resets (e.g. Tailwind preflight's
     universal margin: 0) would otherwise pin the open dialog to the top-left. */
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  max-width: 100%;
  padding: 22px;
  color: var(--_text);
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: calc(var(--_radius) + 4px);
  box-shadow: var(--_shadow);
}

.fc-dialog::backdrop {
  background: var(--_backdrop);
}

.fc-dialog[open] {
  animation: fc-fade 0.14s ease-out;
}

.fc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--_muted);
  background: transparent;
  border: 0;
  border-radius: var(--_radius);
  cursor: pointer;
}

.fc-close:hover {
  color: var(--_text);
}

/* Leave room for the close button beside the heading. */
.fc-mode-modal .fc-head {
  padding-right: 32px;
}

/* --------------------------------------------------------------- page mode */

.fc-mode-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 32px 16px;
  background: var(--_bg);
}

.fc-mode-page .fc-panel {
  width: 100%;
  max-width: 520px;
  gap: 18px;
  padding: 28px;
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: calc(var(--_radius) + 6px);
  box-shadow: var(--_shadow);
}

.fc-mode-page .fc-heading {
  font-size: 1.5rem;
}

.fc-mode-page .fc-submit {
  width: 100%;
}

.fc-mode-page .fc-actions {
  display: block;
}

/* ------------------------------------------------------------ preferences */

@media (prefers-reduced-motion: reduce) {
  .fc *,
  .fc *::before,
  .fc *::after,
  .fc-dialog[open] {
    animation: none !important;
    transition: none !important;
  }
}