/* feedback-form-controls v1.1 (contract v3) — motion for native form controls.
   Classes are added by component.js; put them in your markup too for a zero-flash first paint.
   Every class is prefixed .mc-form-*; colour knobs default to the theme tier
   (--mc-bg/fg/muted/surface/surface-2/border/accent/accent-fg/danger/radius/density), so a control works standalone,
   in light and dark, or inside an enhanced .mc-form root. Size knobs are local --mc-* vars. Motion values are tokens only.
   Pattern: the resting (off) state carries the EXIT transition, the on state the ENTER transition,
   so exits are shorter and both ease out. */

/* ---------- shared: theme mapping, press + focus ring that eases in ---------- */
.mc-form, .mc-form-switch, .mc-form-slider, .mc-form-seg {
  --mc-form-thumb: #fff; --mc-form-shade: #00000059; /* palette-exception: physical thumbs stay white with a dark drop shadow in both schemes (platform convention) */
}
.mc-form-seg { --mc-form-pill: var(--mc-surface); }
:root[data-theme="dark"] .mc-form-seg { --mc-form-pill: color-mix(in oklab, var(--mc-fg) 13%, var(--mc-surface-2)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mc-form-seg { --mc-form-pill: color-mix(in oklab, var(--mc-fg) 13%, var(--mc-surface-2)); } }

/* ---------- shared: press + focus ring ---------- */
.mc-form-switch, .mc-form-check, .mc-form-radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; cursor: pointer;
  vertical-align: middle; -webkit-tap-highlight-color: transparent;
  outline: 2px solid transparent; outline-offset: 5px;
  transition: scale var(--dur-150) var(--ease-out), outline-color var(--dur-100) var(--ease-out), outline-offset var(--dur-100) var(--ease-out); /* law2-exception: outline paints only on focus change, not a hot path */
}
.mc-form-switch:active:not(:disabled), .mc-form-check:active:not(:disabled), .mc-form-radio:active:not(:disabled) { scale: var(--scale-press); }
.mc-form-switch:focus-visible, .mc-form-check:focus-visible, .mc-form-radio:focus-visible, .mc-form-input:focus-visible {
  outline-color: var(--mc-ring, color-mix(in oklab, var(--mc-accent) 60%, transparent)); outline-offset: 2px;
  transition: scale var(--dur-150) var(--ease-out), outline-color var(--dur-200) var(--ease-out), outline-offset var(--dur-200) var(--ease-out), border-color var(--dur-150) var(--ease-out); /* law2-exception: focus ring eases in once per focus */
}
.mc-form-switch:disabled, .mc-form-check:disabled, .mc-form-radio:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- switch: the input is the track, ::before the thumb, ::after the on-fill ---------- */
.mc-form-switch {
  width: var(--mc-switch-w, 40px); height: var(--mc-switch-h, 24px); border-radius: 999px;
  background: var(--mc-switch-off, color-mix(in oklab, var(--mc-fg) 20%, var(--mc-surface-2))); isolation: isolate; touch-action: pan-y;
}
.mc-form-switch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mc-accent);
  opacity: 0; transition: opacity var(--dur-150) var(--ease-out);
}
.mc-form-switch:checked::after { opacity: 1; transition: opacity var(--dur-200) var(--ease-out); }
.mc-form-switch::before {
  content: ""; position: absolute; z-index: 1; inset-block-start: var(--mc-switch-pad, 3px); inset-inline-start: var(--mc-switch-pad, 3px);
  width: var(--mc-switch-thumb, 18px); height: var(--mc-switch-thumb, 18px); border-radius: 50%;
  background: var(--mc-thumb-bg, var(--mc-form-thumb)); box-shadow: 0 1px 3px var(--mc-form-shade);
  translate: var(--mc-drag, 0px) 0;
  transition: translate var(--spring-default-dur) var(--spring-default);
}
.mc-form-switch:checked::before { translate: var(--mc-drag, calc(var(--mc-switch-w, 40px) - var(--mc-switch-thumb, 18px) - 2 * var(--mc-switch-pad, 3px))) 0; }
.mc-form-switch:dir(rtl)::before { translate: calc(var(--mc-drag, 0px) * -1) 0; }
.mc-form-switch:dir(rtl):checked::before { translate: calc(var(--mc-drag, calc(var(--mc-switch-w, 40px) - var(--mc-switch-thumb, 18px) - 2 * var(--mc-switch-pad, 3px))) * -1) 0; }
.mc-form-switch.is-dragging::before { transition: none; }
.mc-form-switch.is-dragging { cursor: grabbing; }

/* ---------- checkbox: fill scales in, the check draws once ---------- */
.mc-form-box { display: inline-grid; flex: none; vertical-align: middle; }
.mc-form-box > * { grid-area: 1 / 1; }
.mc-form-check {
  width: var(--mc-check, 18px); height: var(--mc-check, 18px); border-radius: var(--mc-check-radius, 5px);
  border: 1.5px solid var(--mc-control-line, color-mix(in oklab, var(--mc-fg) 38%, transparent)); background: transparent; isolation: isolate;
}
.mc-form-check::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--mc-accent);
  opacity: 0; scale: var(--scale-enter);
  transition: opacity var(--dur-100) var(--ease-out), scale var(--dur-100) var(--ease-out);
}
.mc-form-check:is(:checked, :indeterminate)::before { opacity: 1; scale: 1; transition: opacity var(--dur-150) var(--ease-out), scale var(--dur-150) var(--ease-out); }
.mc-form-check-ui { width: var(--mc-check, 18px); height: var(--mc-check, 18px); pointer-events: none; color: var(--mc-on-accent, var(--mc-accent-fg)); z-index: 1; place-self: center; }
.mc-form-check-ui path {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  /* exit: a quick fade; the stroke resets only after it is invisible, so unchecking never "undraws" */
  transition: opacity var(--dur-100) var(--ease-out), stroke-dashoffset var(--dur-0) var(--ease-linear) var(--dur-100); /* law2-exception: one-shot stroke draw */
}
.mc-form-check:checked + .mc-form-check-ui [data-tick], .mc-form-check:indeterminate + .mc-form-check-ui [data-dash] {
  opacity: 1; stroke-dashoffset: 0;
  transition: opacity var(--dur-0) var(--ease-linear), stroke-dashoffset var(--dur-200) var(--ease-out) var(--dur-0); /* law2-exception: one-shot stroke draw (enter) */
}
.mc-form-check:indeterminate + .mc-form-check-ui [data-tick] { opacity: 0; }

/* ---------- radio: dot scales in from --scale-icon-from ---------- */
.mc-form-radio {
  width: var(--mc-check, 18px); height: var(--mc-check, 18px); border-radius: 50%;
  border: 1.5px solid var(--mc-control-line, color-mix(in oklab, var(--mc-fg) 38%, transparent)); background: transparent;
}
.mc-form-radio:checked { border-color: var(--mc-accent); }
.mc-form-radio::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mc-accent);
  opacity: 0; scale: var(--scale-icon-from);
  transition: opacity var(--dur-100) var(--ease-out), scale var(--dur-100) var(--ease-out);
}
.mc-form-radio:checked::before { opacity: 1; scale: 1; transition: opacity var(--dur-150) var(--ease-out), scale var(--dur-200) var(--ease-out); }

/* ---------- segmented: real radios, one pill moved by FLIP (transform only) ---------- */
.mc-form-seg {
  position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--mc-seg-radius, var(--mc-radius));
  background: var(--mc-seg-bg, var(--mc-surface-2)); border: 1px solid var(--mc-line, var(--mc-border)); isolation: isolate;
}
.mc-form-seg > label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: calc(var(--mc-seg-radius, var(--mc-radius)) - 3px); cursor: pointer; user-select: none;
  color: var(--mc-muted); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: color var(--dur-150) var(--ease-out), scale var(--dur-150) var(--ease-out), outline-color var(--dur-150) var(--ease-out);
}
.mc-form-seg > label:has(:checked) { color: var(--mc-fg); }
.mc-form-seg > label:active { scale: var(--scale-press); }
.mc-form-seg > label:has(:focus-visible) { outline-color: var(--mc-ring, color-mix(in oklab, var(--mc-accent) 60%, transparent)); }
.mc-form-seg:not(.is-enhanced) > label:has(:checked) { background: var(--mc-seg-pill, var(--mc-form-pill)); } /* no-JS fallback */
.mc-form-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.mc-form-seg-pill {
  position: absolute; z-index: 0; border-radius: calc(var(--mc-seg-radius, var(--mc-radius)) - 3px); pointer-events: none;
  background: var(--mc-seg-pill, var(--mc-form-pill)); box-shadow: 0 1px 2px var(--mc-form-shade), 0 0 0 1px color-mix(in oklab, var(--mc-fg) 5%, transparent) inset;
  transform-origin: 0 50%;
}

/* ---------- range: track fill, bubble that follows the thumb, ticks ---------- */
.mc-form-range { position: relative; display: block; --mc-thumb: 18px; }
.mc-form-slider { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; outline: none; }
.mc-form-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--mc-accent) var(--mc-fill, 0%), var(--mc-track, color-mix(in oklab, var(--mc-fg) 18%, transparent)) var(--mc-fill, 0%));
}
.mc-form-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--mc-track, color-mix(in oklab, var(--mc-fg) 18%, transparent)); }
.mc-form-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--mc-accent); }
.mc-form-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--mc-thumb); height: var(--mc-thumb); margin-top: calc((4px - var(--mc-thumb)) / 2);
  border: 0; border-radius: 50%; background: var(--mc-thumb-bg, var(--mc-form-thumb)); box-shadow: 0 0 0 1px var(--mc-border), 0 1px 3px var(--mc-form-shade); /* ring: the white thumb must read on a light track */
  outline: 2px solid transparent; outline-offset: 5px;
  transition: scale var(--dur-150) var(--ease-out), outline-color var(--dur-150) var(--ease-out), outline-offset var(--dur-150) var(--ease-out); /* law2-exception: thumb focus ring */
}
.mc-form-slider::-moz-range-thumb {
  width: var(--mc-thumb); height: var(--mc-thumb); border: 0; border-radius: 50%; background: var(--mc-thumb-bg, var(--mc-form-thumb)); box-shadow: 0 0 0 1px var(--mc-border), 0 1px 3px var(--mc-form-shade);
  transition: scale var(--dur-150) var(--ease-out);
}
.mc-form-slider:active::-webkit-slider-thumb { scale: var(--mc-tick-pop, 1.12); }
.mc-form-slider:active::-moz-range-thumb { scale: var(--mc-tick-pop, 1.12); }
.mc-form-slider:focus-visible::-webkit-slider-thumb { outline-color: var(--mc-ring, color-mix(in oklab, var(--mc-accent) 60%, transparent)); outline-offset: 3px; }
.mc-form-bubble { position: absolute; left: 0; bottom: calc(100% + 2px); pointer-events: none; transform-origin: 0 100%; }
.mc-form-bubble > span {
  display: block; translate: -50% 0; padding: 3px 8px; border-radius: 7px; white-space: nowrap;
  background: var(--mc-bubble-bg, var(--mc-fg)); color: var(--mc-bubble-fg, var(--mc-bg));
  font: 600 12px/1.2 var(--mc-font); font-variant-numeric: tabular-nums;
  transform-origin: 0 100%; opacity: 0; scale: var(--scale-enter);
  transition: opacity var(--dur-100) var(--ease-out), scale var(--dur-100) var(--ease-out);
}
.mc-form-range[data-active] .mc-form-bubble > span { opacity: 1; scale: 1; transition: opacity var(--dur-150) var(--ease-out), scale var(--dur-150) var(--ease-out); }
.mc-form-ticks { position: relative; display: block; height: 8px; margin: 2px calc(var(--mc-thumb) / 2) 0; }
.mc-form-ticks > i {
  position: absolute; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--mc-track, color-mix(in oklab, var(--mc-fg) 18%, transparent)); transition: background-color var(--dur-150) var(--ease-out);
}
.mc-form-ticks > i[data-on] { background: var(--mc-accent); }

/* ---------- text fields + inline message (grid-rows height trick) ---------- */
.mc-form-input {
  outline: 2px solid transparent; outline-offset: 5px;
  transition: outline-color var(--dur-100) var(--ease-out), outline-offset var(--dur-100) var(--ease-out), border-color var(--dur-150) var(--ease-out); /* law2-exception: focus ring */
}
.mc-form-input[aria-invalid="true"] { border-color: var(--mc-err, var(--mc-danger)); --mc-ring: var(--mc-err-ring, color-mix(in oklab, var(--mc-danger) 50%, transparent)); }
.mc-form-msg {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-150) var(--ease-out), opacity var(--dur-100) var(--ease-out); /* law2-exception: message height via grid rows; one-shot per validation change */
}
.mc-form-msg > * { overflow: hidden; min-height: 0; }
.mc-form-msg p {
  margin: 0; padding-top: 6px; color: var(--mc-err, var(--mc-danger)); font-size: 12.5px; line-height: 1.4;
  translate: 0 calc(var(--travel-enter) * -0.5); transition: translate var(--dur-150) var(--ease-out);
}
.mc-form-msg[data-show] {
  grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows var(--dur-200) var(--ease-out), opacity var(--dur-200) var(--ease-out); /* law2-exception: message height via grid rows (enter) */
}
.mc-form-msg[data-show] p { translate: 0 0; transition: translate var(--dur-200) var(--ease-out); }

/* ---------- submit loading morph (layer contract shared with feedback-press-toast) ---------- */
.mc-form-loading { display: inline-grid; place-items: center; transition: scale var(--dur-150) var(--ease-out); }
.mc-form-loading:active:not([aria-busy="true"]) { scale: var(--scale-press); }
.mc-form-loading[aria-busy="true"], .mc-form-loading[data-state="done"] { cursor: default; }
.mc-form-loading [data-mc-layer] {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  opacity: 0; scale: var(--scale-enter); filter: blur(calc(var(--blur-crossfade) * .5));
  transition: opacity var(--dur-150) var(--ease-out), scale var(--dur-150) var(--ease-out), filter var(--dur-150) var(--ease-out);
}
.mc-form-loading [data-mc-layer][data-on] { opacity: 1; scale: 1; filter: blur(0); transition: opacity var(--dur-200) var(--ease-out), scale var(--dur-200) var(--ease-out), filter var(--dur-200) var(--ease-out); }
.mc-form-loading [data-mc-layer] svg { width: 15px; height: 15px; flex: none; }
.mc-form-loading[data-state="loading"] [data-mc-spinner] { animation: mc-form-spin calc(var(--dur-300) * 2.5) var(--ease-linear) infinite; }
.mc-form-loading [data-mc-tick] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-0) var(--ease-linear) var(--dur-200); } /* law2-exception: one-shot stroke draw */
.mc-form-loading [data-mc-layer][data-on] [data-mc-tick] { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-200) var(--ease-out) var(--dur-100); } /* law2-exception: one-shot stroke draw */

/* ---------- reduced motion: nothing travels; state changes fade or are instant ---------- */
@media (prefers-reduced-motion: reduce) {
  .mc-form-switch::before { transition: none; }                       /* thumb jumps, fill still fades */
  .mc-form-check-ui path { stroke-dashoffset: 0; }                    /* check fades in whole, no draw */
  .mc-form-loading [data-mc-tick] { stroke-dashoffset: 0; }
  .mc-form-msg, .mc-form-msg[data-show] { transition: opacity var(--dur-150) var(--ease-out); } /* height jumps */
  .mc-form-msg p, .mc-form-msg[data-show] p { translate: none; transition: none; }
  .mc-form-switch, .mc-form-check, .mc-form-radio, .mc-form-input,
  .mc-form-switch:focus-visible, .mc-form-check:focus-visible, .mc-form-radio:focus-visible, .mc-form-input:focus-visible { outline-offset: 2px; }
  .mc-form-slider:active::-webkit-slider-thumb { scale: 1; }
  .mc-form-slider:active::-moz-range-thumb { scale: 1; }
  .mc-form-loading [data-mc-layer] { filter: none; }
  .mc-form-loading[data-state="loading"] [data-mc-spinner] { animation: mc-form-pulse calc(var(--dur-500) * 3) var(--ease-in-out) infinite alternate; }
}
/* the same substitution when the site picks reduced (<html data-mc-motion>); the enhanced root also carries .is-reduced */
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-switch::before { transition: none; }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-check-ui path,
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-loading [data-mc-tick] { stroke-dashoffset: 0; }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) :is(.mc-form-msg, .mc-form-msg[data-show]) { transition: opacity var(--dur-150) var(--ease-out); }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) :is(.mc-form-msg p, .mc-form-msg[data-show] p) { translate: none; transition: none; }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-slider:active::-webkit-slider-thumb { scale: 1; }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-loading [data-mc-layer] { filter: none; scale: 1; }
:root:is([data-mc-motion="reduce"], [data-mc-motion="reduced"]) .mc-form-loading[data-state="loading"] [data-mc-spinner] { animation: mc-form-pulse calc(var(--dur-500) * 3) var(--ease-in-out) infinite alternate; }

/* none: every state lands in one frame; the spinner holds still and the "Saving" label carries the state */
:root[data-mc-motion="none"] :is(.mc-form-switch, .mc-form-check, .mc-form-radio, .mc-form-input, .mc-form-seg > label, .mc-form-loading, .mc-form-ticks > i),
:root[data-mc-motion="none"] :is(.mc-form-switch, .mc-form-check, .mc-form-radio)::before,
:root[data-mc-motion="none"] :is(.mc-form-switch::after, .mc-form-check-ui path, .mc-form-msg, .mc-form-msg p, .mc-form-bubble > span),
:root[data-mc-motion="none"] .mc-form-loading :is([data-mc-layer], [data-mc-tick]) { transition: none; }
:root[data-mc-motion="none"] :is(.mc-form-check-ui path, .mc-form-loading [data-mc-tick]) { stroke-dashoffset: 0; }
:root[data-mc-motion="none"] .mc-form-loading [data-mc-layer] { filter: none; scale: 1; }
:root[data-mc-motion="none"] .mc-form-loading[data-state="loading"] [data-mc-spinner] { animation: none; }
:root[data-mc-paused] .mc-form-loading [data-mc-spinner] { animation-play-state: paused; }   /* law 6: page pause freezes the spinner in place */

/* law 14: fills, tints and the drop-shadowed thumb become system colours; state is never colour-only */
@media (forced-colors: active) {
  .mc-form-switch { border: 1px solid CanvasText; background: Canvas; }
  .mc-form-switch::after { background: Highlight; }
  .mc-form-switch::before { background: CanvasText; box-shadow: none; }
  .mc-form-switch:checked::before { background: HighlightText; }
  .mc-form-check, .mc-form-radio { border-color: CanvasText; }
  .mc-form-check::before, .mc-form-radio::before { background: Highlight; }
  .mc-form-check-ui { color: HighlightText; }
  .mc-form-radio:checked { border-color: Highlight; }
  /* the resting transparent outline would be forced visible on every control: paint it Canvas, Highlight on focus */
  :is(.mc-form-switch, .mc-form-check, .mc-form-radio, .mc-form-input), .mc-form-seg > label { outline-color: Canvas; }
  :is(.mc-form-switch, .mc-form-check, .mc-form-radio, .mc-form-input):focus-visible,
  .mc-form-seg > label:has(:focus-visible) { outline-color: Highlight; }
  .mc-form-seg { border-color: CanvasText; }
  .mc-form-seg-pill { background: Canvas; box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px; }
  .mc-form-seg > label:has(:checked) { color: CanvasText; font-weight: 600; }
  .mc-form-seg:not(.is-enhanced) > label:has(:checked) { outline: 2px solid Highlight; }
  .mc-form-slider { forced-color-adjust: none; }
  .mc-form-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, Highlight var(--mc-fill, 0%), GrayText var(--mc-fill, 0%)); }
  .mc-form-slider::-moz-range-track { background: GrayText; }
  .mc-form-slider::-moz-range-progress { background: Highlight; }
  .mc-form-slider::-webkit-slider-thumb { background: Canvas; border: 2px solid CanvasText; box-shadow: none; }
  .mc-form-slider:focus-visible::-webkit-slider-thumb { outline-color: Highlight; }
  .mc-form-ticks > i { background: CanvasText; }
  .mc-form-ticks > i[data-on] { background: Highlight; }
  .mc-form-bubble > span { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .mc-form-input[aria-invalid="true"] { border: 2px solid Mark; }
  .mc-form-msg p { color: CanvasText; }
}
@media (prefers-contrast: more) {
  .mc-form-check, .mc-form-radio { border-width: 2px; }
  :is(.mc-form-switch, .mc-form-check, .mc-form-radio, .mc-form-input):focus-visible { outline-width: 3px; }
}

@keyframes mc-form-spin { to { rotate: 1turn; } }
@keyframes mc-form-pulse { from { opacity: 1; } to { opacity: .35; } }