/* Shared form styling. Needs tokens.css loaded first (uses --ink, --muted, --card, --line).
   First implemented in /interesse/; extracted here once /style/ needed to demo the same controls
   without duplicating the radio/checkbox mask CSS. Page-specific bits (error message styling, the
   honeypot field, the privacy <details>) stay page-owned — this file is only the general pattern. */
.field { margin-bottom: 1.25rem; }
label, .label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.65rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
textarea { min-height: 5rem; resize: vertical; border-radius: 16px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; }
.select-wrap .caret {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
fieldset.field { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.5rem; }
.type .check { margin-bottom: 0.4rem; }
.check { display: flex; gap: 0.6rem; align-items: center; font-weight: 400; cursor: pointer; }
/* Radio and checkbox: real inputs, custom-drawn (Wendy's Figma RadioButton/Checkbox components),
   not image assets — so the dot/checkmark use currentColor and follow dark/light mode like
   everything else, instead of the hardcoded white her Figma export had. */
.check input[type="radio"], .check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; cursor: pointer;
  display: inline-grid; place-content: center; border: 2px solid var(--ink); outline: none;
}
.check input[type="radio"] { width: 20px; height: 20px; border-radius: 50%; }
.check input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .1s ease;
}
.check input[type="radio"]:checked::before { transform: scale(1); }
.check input[type="checkbox"] { width: 20px; height: 20px; border-radius: 4px; }
.check input[type="checkbox"]::before {
  content: ""; width: 16px; height: 16px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M13.8079%203.37455L13.3831%204.09135L8.44071%2012.4312C7.94957%2013.2599%206.76823%2013.3108%206.20829%2012.5269L3.32157%208.48393L2.8372%207.80619L4.19267%206.83744L4.67704%207.51518L7.26689%2011.1412L11.9495%203.24174L12.3743%202.52494L13.8079%203.37455Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M13.8079%203.37455L13.3831%204.09135L8.44071%2012.4312C7.94957%2013.2599%206.76823%2013.3108%206.20829%2012.5269L3.32157%208.48393L2.8372%207.80619L4.19267%206.83744L4.67704%207.51518L7.26689%2011.1412L11.9495%203.24174L12.3743%202.52494L13.8079%203.37455Z%27/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0); transition: transform .1s ease;
}
.check input[type="checkbox"]:checked::before { transform: scale(1); }
.check input[type="radio"]:focus-visible, .check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}