/* sitebuilder forms runtime — styles. Scoped to .fom so nothing here can touch the
   site's own rules. Structural by default: colors, fonts and backgrounds
   are inherited from the page unless the form opts into its own palette
   (.fom--own-style sets the --fom-* tokens; every rule falls back to
   currentColor / inherit). Copied into each site as forms/forms.css or
   assets/forms.css — the site owns its copy. */

.fom {
  /* tokens: --fom-text / --fom-bg / --fom-font are only set (inline) when the
     form uses its own style; never give a token a CSS-wide keyword — a
     failed var() makes the whole rule that uses it fall back to unset */
  --fom-primary: currentColor;
  --fom-line: color-mix(in srgb, currentColor 28%, transparent);
  --fom-line-soft: color-mix(in srgb, currentColor 12%, transparent);
  --fom-radius: 6px;
  --fom-gap: 1.25rem;
  --fom-width: 100%;
  --fom-pad: 0;
  --fom-cols: 1;
  box-sizing: border-box;
  max-width: var(--fom-width);
  margin: 0 0 var(--fom-gap);
  padding: var(--fom-pad);
}
.fom *, .fom *::before, .fom *::after { box-sizing: border-box; }
.fom--own-style { color: var(--fom-text); background: var(--fom-bg); font-family: var(--fom-font); }
.fom--bordered { border: 1px solid var(--fom-line); border-radius: var(--fom-radius); }

.fom-head { margin-bottom: var(--fom-gap); }
.fom-title { margin: 0 0 .35em; }
.fom-desc { margin: 0; opacity: .82; }

.fom [hidden] { display: none !important; }
.fom-q { margin: 0 0 var(--fom-gap); min-width: 0; }
.fom-row { display: grid; grid-template-columns: repeat(var(--fom-cols), minmax(0, 1fr)); gap: 0 var(--fom-gap); }
@media (max-width: 640px) { .fom-row { grid-template-columns: 1fr; } }
.fom--boxed .fom-q { border: 1px solid var(--fom-line-soft); border-radius: var(--fom-radius); padding: calc(var(--fom-gap) * .7); }
.fom--boxed .fom-q-image { border: 0; padding: 0; }

.fom-label { display: block; margin: 0 0 .4em; font-weight: 500; }
.fom--bold .fom-label { font-weight: 700; }
.fom-req { color: var(--fom-req, var(--fom-primary)); margin-left: .15em; }
.fom-help { margin: -.2em 0 .6em; font-size: .9em; opacity: .75; }

.fom input[type="text"], .fom input[type="email"], .fom input[type="tel"], .fom input[type="url"],
.fom input[type="date"], .fom input[type="time"], .fom textarea, .fom select {
  display: block; width: 100%; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--fom-line); border-radius: var(--fom-radius); padding: .6em .75em; margin: 0;
}
.fom textarea { resize: vertical; min-height: 6em; }
.fom select { appearance: auto; }
.fom input:focus-visible, .fom textarea:focus-visible, .fom select:focus-visible {
  outline: 2px solid var(--fom-primary); outline-offset: 1px; border-color: var(--fom-primary);
}
.fom input[type="radio"], .fom input[type="checkbox"], .fom input[type="range"] { accent-color: var(--fom-primary); }
.fom input:user-invalid, .fom textarea:user-invalid, .fom select:user-invalid { border-color: #c0392b; }

/* option lists: plain list (default), pills, cards */
.fom-opts { display: grid; gap: .45em; }
.fom-opt { display: flex; align-items: center; gap: .6em; cursor: pointer; margin: 0; line-height: 1.35; }
.fom-opt input { margin: 0; flex: none; }
.fom-opts--pills, .fom-opts--buttons { display: flex; flex-wrap: wrap; gap: .5em; }
.fom-opts--pills .fom-opt, .fom-opts--buttons .fom-opt, .fom-pill {
  position: relative; border: 1px solid var(--fom-line); border-radius: 999px; padding: .45em .95em;
}
.fom-opts--pills .fom-opt input, .fom-opts--buttons .fom-opt input, .fom-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.fom-opts--pills .fom-opt:has(input:checked), .fom-opts--buttons .fom-opt:has(input:checked), .fom-pill:has(input:checked) {
  border-color: var(--fom-primary); box-shadow: inset 0 0 0 1px var(--fom-primary);
}
.fom-opt:has(input:focus-visible) { outline: 2px solid var(--fom-primary); outline-offset: 2px; }
.fom-opts--cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.fom-opts--cards .fom-opt {
  position: relative; flex-direction: column; align-items: stretch; text-align: center; gap: .5em;
  border: 1px solid var(--fom-line); border-radius: var(--fom-radius); padding: .7em;
}
.fom-opts--cards .fom-opt input { position: absolute; top: .6em; left: .6em; }
.fom-opts--cards .fom-opt img { width: 100%; height: auto; border-radius: calc(var(--fom-radius) - 2px); }
.fom-opts--cards .fom-opt:has(input:checked) { border-color: var(--fom-primary); box-shadow: inset 0 0 0 1px var(--fom-primary); }

/* linear scale */
.fom-scale { display: flex; align-items: center; gap: .75em; flex-wrap: wrap; }
.fom-scale--text { gap: .5em; }
.fom-scale-label { font-size: .9em; opacity: .8; }
.fom-slider { display: flex; align-items: center; gap: .75em; flex: 1 1 200px; }
.fom-slider input[type="range"] { flex: 1; margin: 0; }
.fom-slider output { min-width: 2ch; text-align: center; font-weight: 600; color: var(--fom-primary); }

/* grid (matrix) */
.fom-grid-wrap { overflow-x: auto; }
.fom-grid { border-collapse: collapse; width: 100%; font-size: .95em; }
.fom-grid th, .fom-grid td { padding: .5em .6em; border-bottom: 1px solid var(--fom-line-soft); text-align: center; }
.fom-grid th[scope="row"] { text-align: left; font-weight: 500; }
.fom-grid thead th { font-weight: 600; font-size: .9em; }
.fom-grid tbody tr:hover { background: var(--fom-line-soft); }

/* rating */
.fom-rating { display: flex; gap: .15em; }
.fom-rate { position: relative; cursor: pointer; font-size: 1.9em; line-height: 1; opacity: .35; transition: opacity .12s, transform .12s; }
.fom-rate input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.fom-rate-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fom-rate.is-lit, .fom-rate:has(input:checked) { opacity: 1; color: var(--fom-primary); }
.fom-rate:hover { transform: scale(1.12); }
.fom-rate:has(input:focus-visible) { outline: 2px solid var(--fom-primary); outline-offset: 2px; border-radius: 4px; }

/* image element */
.fom-q-image { margin: 0 0 var(--fom-gap); }
.fom-q-image img { display: block; max-width: 100%; height: auto; border-radius: var(--fom-radius); }
.fom-q-image figcaption { margin-top: .4em; font-size: .9em; opacity: .8; }

/* honeypot: off-screen, never display:none (bots check for that) */
.fom-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* actions + status */
.fom-actions { display: flex; align-items: center; gap: 1em; margin-top: calc(var(--fom-gap) * .5); }
.fom--submit-center .fom-actions { justify-content: center; }
.fom--submit-right .fom-actions { justify-content: flex-end; }
.fom-submit {
  font: inherit; font-weight: 600; cursor: pointer; padding: .7em 1.6em; border-radius: var(--fom-radius);
  border: 2px solid currentColor; background: transparent; color: inherit;
}
.fom--own-style .fom-submit { border-color: var(--fom-primary); background: var(--fom-primary); color: #fff; }
.fom-submit:hover { filter: brightness(1.08); }
.fom-submit[disabled] { opacity: .6; cursor: progress; }
.fom-status { font-size: .9em; opacity: .85; }
.fom-status.is-error { color: #c0392b; opacity: 1; }
.fom-success { padding: var(--fom-gap); border: 1px solid var(--fom-line); border-radius: var(--fom-radius); text-align: center; }
.fom-success-title { margin: 0 0 .3em; }
.fom-success-text { margin: 0; }
.fom-missing { padding: .8em 1em; border: 1px dashed currentColor; border-radius: 6px; opacity: .7; }