Functional Weave
Code in TypeScript

react.form.styles@1.0.0

vectors.json

85,109 bytes · view raw

[
  {"name": "the default theme: GOV.UK colours, a yellow focus ring, dark mode by prefers-color-scheme", "args": [{}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "an accent colour changes only --caps-form-accent", "args": [{"accent": "#00703c"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#00703c;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "an error colour recolours every error bar, border and message through one property", "args": [{"error": "#b10e1e"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#b10e1e;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "text, hint, border, background and focus colours together; the dark palette is unchanged", "args": [{"text": "#1a1a1a", "muted": "#6b6b6b", "border": "#767676", "background": "#fafafa", "focus": "#fd0"}], "expect": ":root{--caps-form-text:#1a1a1a;--caps-form-muted:#6b6b6b;--caps-form-background:#fafafa;--caps-form-border:#767676;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#fd0;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "a radius and a font; quoted family names are fine", "args": [{"radius": "4px", "font": "\"Helvetica Neue\",Arial,sans-serif"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:4px;--caps-form-font:\"Helvetica Neue\",Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "a scope limits every rule and the custom properties to one container", "args": [{"scope": ".signup"}], "expect": ".signup{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){.signup{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.signup .fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.signup .fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.signup .fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.signup .fune-label,.signup .fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.signup .fune-legend--heading{margin-bottom:.9375rem}\n.signup .fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.signup .fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.signup .fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.signup .fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.signup .fune-input,.signup .fune-textarea,.signup .fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.signup .fune-input,.signup .fune-textarea{width:100%}\n.signup .fune-textarea{display:block;min-height:6rem;resize:vertical}\n.signup .fune-select{min-width:11.5em}\n.signup .fune-input--error,.signup .fune-textarea--error,.signup .fune-select--error{border-color:var(--caps-form-error)}\n.signup .fune-input:focus,.signup .fune-textarea:focus,.signup .fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.signup .fune-input:disabled,.signup .fune-textarea:disabled,.signup .fune-select:disabled{opacity:.5;cursor:not-allowed}\n.signup .fune-input--width-2{max-width:5.4ex}\n.signup .fune-input--width-4{max-width:9ex}\n.signup .fune-input-wrapper{display:flex}\n.signup .fune-input-wrapper .fune-input{min-width:0}\n.signup .fune-input-prefix,.signup .fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.signup .fune-input-prefix{border-right:0}\n.signup .fune-input-suffix{border-left:0}\n.signup .fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.signup .fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.signup .fune-checkbox,.signup .fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.signup .fune-checkbox-input,.signup .fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.signup .fune-checkboxes--small .fune-checkbox-input,.signup .fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.signup .fune-checkbox-input:focus-visible,.signup .fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-checkbox-label,.signup .fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.signup .fune-checkbox-hint,.signup .fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.signup .fune-checkboxes-divider,.signup .fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.signup .fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.signup .fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.signup .fune-date-input-item .fune-field{margin-bottom:0}\n.signup .fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.signup .fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.signup .fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.signup .fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.signup .fune-password-checklist__item--met::before{content:\"\\2713\"}\n.signup .fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.signup .fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.signup .fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.signup .fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.signup .fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.signup .fune-button:hover{filter:brightness(.9)}\n.signup .fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.signup .fune-button:disabled,.signup .fune-button[aria-disabled=true],.signup .fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.signup .fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.signup .fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.signup .fune-error-summary-list{margin:0;padding:0;list-style:none}\n.signup .fune-error-summary-list li{margin:0 0 .3125rem}\n.signup .fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.signup .fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "a scope may use a child combinator", "args": [{"scope": "main > form"}], "expect": "main > form{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){main > form{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\nmain > form .fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\nmain > form .fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\nmain > form .fune-fieldset{min-width:0;margin:0;padding:0;border:0}\nmain > form .fune-label,main > form .fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\nmain > form .fune-legend--heading{margin-bottom:.9375rem}\nmain > form .fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\nmain > form .fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\nmain > form .fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\nmain > form .fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\nmain > form .fune-input,main > form .fune-textarea,main > form .fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\nmain > form .fune-input,main > form .fune-textarea{width:100%}\nmain > form .fune-textarea{display:block;min-height:6rem;resize:vertical}\nmain > form .fune-select{min-width:11.5em}\nmain > form .fune-input--error,main > form .fune-textarea--error,main > form .fune-select--error{border-color:var(--caps-form-error)}\nmain > form .fune-input:focus,main > form .fune-textarea:focus,main > form .fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\nmain > form .fune-input:disabled,main > form .fune-textarea:disabled,main > form .fune-select:disabled{opacity:.5;cursor:not-allowed}\nmain > form .fune-input--width-2{max-width:5.4ex}\nmain > form .fune-input--width-4{max-width:9ex}\nmain > form .fune-input-wrapper{display:flex}\nmain > form .fune-input-wrapper .fune-input{min-width:0}\nmain > form .fune-input-prefix,main > form .fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\nmain > form .fune-input-prefix{border-right:0}\nmain > form .fune-input-suffix{border-left:0}\nmain > form .fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\nmain > form .fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\nmain > form .fune-checkbox,main > form .fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\nmain > form .fune-checkbox-input,main > form .fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\nmain > form .fune-checkboxes--small .fune-checkbox-input,main > form .fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\nmain > form .fune-checkbox-input:focus-visible,main > form .fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\nmain > form .fune-checkbox-label,main > form .fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\nmain > form .fune-checkbox-hint,main > form .fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\nmain > form .fune-checkboxes-divider,main > form .fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\nmain > form .fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\nmain > form .fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\nmain > form .fune-date-input-item .fune-field{margin-bottom:0}\nmain > form .fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\nmain > form .fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\nmain > form .fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\nmain > form .fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\nmain > form .fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\nmain > form .fune-password-checklist__item--met::before{content:\"\\2713\"}\nmain > form .fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\nmain > form .fune-password-checklist__item--unmet::before{content:\"\\2013\"}\nmain > form .fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\nmain > form .fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\nmain > form .fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\nmain > form .fune-button:hover{filter:brightness(.9)}\nmain > form .fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\nmain > form .fune-button:disabled,main > form .fune-button[aria-disabled=true],main > form .fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\nmain > form .fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\nmain > form .fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\nmain > form .fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\nmain > form .fune-error-summary-list{margin:0;padding:0;list-style:none}\nmain > form .fune-error-summary-list li{margin:0 0 .3125rem}\nmain > form .fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\nmain > form .fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "dark none leaves out the dark palette", "args": [{"dark": "none"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "dark attribute follows data-theme=\"dark\" on any ancestor instead of the system setting", "args": [{"dark": "attribute"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n[data-theme=dark]{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "dark attribute with a scope matches the attribute on an ancestor or on the container itself", "args": [{"dark": "attribute", "scope": ".signup"}], "expect": ".signup{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n[data-theme=dark] .signup,.signup[data-theme=dark]{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}\n.signup .fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.signup .fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.signup .fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.signup .fune-label,.signup .fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.signup .fune-legend--heading{margin-bottom:.9375rem}\n.signup .fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.signup .fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.signup .fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.signup .fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.signup .fune-input,.signup .fune-textarea,.signup .fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.signup .fune-input,.signup .fune-textarea{width:100%}\n.signup .fune-textarea{display:block;min-height:6rem;resize:vertical}\n.signup .fune-select{min-width:11.5em}\n.signup .fune-input--error,.signup .fune-textarea--error,.signup .fune-select--error{border-color:var(--caps-form-error)}\n.signup .fune-input:focus,.signup .fune-textarea:focus,.signup .fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.signup .fune-input:disabled,.signup .fune-textarea:disabled,.signup .fune-select:disabled{opacity:.5;cursor:not-allowed}\n.signup .fune-input--width-2{max-width:5.4ex}\n.signup .fune-input--width-4{max-width:9ex}\n.signup .fune-input-wrapper{display:flex}\n.signup .fune-input-wrapper .fune-input{min-width:0}\n.signup .fune-input-prefix,.signup .fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.signup .fune-input-prefix{border-right:0}\n.signup .fune-input-suffix{border-left:0}\n.signup .fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.signup .fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.signup .fune-checkbox,.signup .fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.signup .fune-checkbox-input,.signup .fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.signup .fune-checkboxes--small .fune-checkbox-input,.signup .fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.signup .fune-checkbox-input:focus-visible,.signup .fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-checkbox-label,.signup .fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.signup .fune-checkbox-hint,.signup .fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.signup .fune-checkboxes-divider,.signup .fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.signup .fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.signup .fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.signup .fune-date-input-item .fune-field{margin-bottom:0}\n.signup .fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.signup .fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.signup .fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.signup .fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.signup .fune-password-checklist__item--met::before{content:\"\\2713\"}\n.signup .fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.signup .fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.signup .fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.signup .fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.signup .fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.signup .fune-button:hover{filter:brightness(.9)}\n.signup .fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.signup .fune-button:disabled,.signup .fune-button[aria-disabled=true],.signup .fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.signup .fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.signup .fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.signup .fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.signup .fune-error-summary-list{margin:0;padding:0;list-style:none}\n.signup .fune-error-summary-list li{margin:0 0 .3125rem}\n.signup .fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.signup .fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "empty strings are the same as leaving a field out", "args": [{"accent": "", "scope": "", "font": ""}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "a double quote inside single quotes does not open a quote", "args": [{"font": "\"Gill Sans\",'O\"Brien',sans-serif"}], "expect": ":root{--caps-form-text:#0b0c0c;--caps-form-muted:#505a5f;--caps-form-background:#ffffff;--caps-form-border:#0b0c0c;--caps-form-accent:#1d70b8;--caps-form-accent-text:#ffffff;--caps-form-secondary:#f3f2f1;--caps-form-focus:#ffdd00;--caps-form-focus-text:#0b0c0c;--caps-form-error:#d4351c;--caps-form-radius:0;--caps-form-font:\"Gill Sans\",'O\"Brien',sans-serif}\n@media (prefers-color-scheme:dark){:root{--caps-form-text:#f3f2f1;--caps-form-muted:#b1b4b6;--caps-form-background:#0b0c0c;--caps-form-border:#b1b4b6;--caps-form-accent:#5694ca;--caps-form-accent-text:#0b0c0c;--caps-form-secondary:#383f43;--caps-form-error:#f47067;color-scheme:dark}}\n.fune-field{margin:0 0 1.875rem;font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3;color:var(--caps-form-text)}\n.fune-field--error{padding-left:.9375rem;border-left:5px solid var(--caps-form-error)}\n.fune-fieldset{min-width:0;margin:0;padding:0;border:0}\n.fune-label,.fune-legend{display:block;max-width:100%;margin:0 0 .3125rem;padding:0;font-weight:400}\n.fune-legend--heading{margin-bottom:.9375rem}\n.fune-legend-heading{margin:0;font-size:2rem;font-weight:700;line-height:1.1}\n.fune-hint{margin:0 0 .9375rem;color:var(--caps-form-muted)}\n.fune-error-message{margin:0 0 .9375rem;font-weight:700;color:var(--caps-form-error)}\n.fune-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}\n.fune-input,.fune-textarea,.fune-select{box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.3125rem .5rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-background);color:var(--caps-form-text);font:inherit}\n.fune-input,.fune-textarea{width:100%}\n.fune-textarea{display:block;min-height:6rem;resize:vertical}\n.fune-select{min-width:11.5em}\n.fune-input--error,.fune-textarea--error,.fune-select--error{border-color:var(--caps-form-error)}\n.fune-input:focus,.fune-textarea:focus,.fune-select:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--caps-form-border)}\n.fune-input:disabled,.fune-textarea:disabled,.fune-select:disabled{opacity:.5;cursor:not-allowed}\n.fune-input--width-2{max-width:5.4ex}\n.fune-input--width-4{max-width:9ex}\n.fune-input-wrapper{display:flex}\n.fune-input-wrapper .fune-input{min-width:0}\n.fune-input-prefix,.fune-input-suffix{display:flex;align-items:center;padding:0 .5rem;border:2px solid var(--caps-form-border);background:var(--caps-form-secondary);white-space:nowrap}\n.fune-input-prefix{border-right:0}\n.fune-input-suffix{border-left:0}\n.fune-character-count__message{margin:.3125rem 0 0;color:var(--caps-form-muted)}\n.fune-character-count__message--over{font-weight:700;color:var(--caps-form-error)}\n.fune-checkbox,.fune-radio{display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:center;margin:0 0 .625rem}\n.fune-checkbox-input,.fune-radio-input{justify-self:center;width:2.5rem;height:2.5rem;margin:0;accent-color:var(--caps-form-accent);cursor:pointer}\n.fune-checkboxes--small .fune-checkbox-input,.fune-radios--small .fune-radio-input{width:1.5rem;height:1.5rem}\n.fune-checkbox-input:focus-visible,.fune-radio-input:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-checkbox-label,.fune-radio-label{display:flex;align-items:center;min-height:2.75rem;margin:0;cursor:pointer}\n.fune-checkbox-hint,.fune-radio-hint{grid-column:2;margin:0 0 .3125rem}\n.fune-checkboxes-divider,.fune-radios-divider{width:2.75rem;margin:0 0 .625rem;text-align:center}\n.fune-radios--inline{display:flex;flex-wrap:wrap;column-gap:1.25rem}\n.fune-date-input{display:flex;flex-wrap:wrap;gap:0 1.25rem}\n.fune-date-input-item .fune-field{margin-bottom:0}\n.fune-password-field__toggle{min-width:4.5rem;min-height:2.75rem;margin-left:.5rem;padding:0 .75rem;border:2px solid var(--caps-form-border);border-radius:var(--caps-form-radius);background:var(--caps-form-secondary);color:var(--caps-form-text);font:inherit;font-weight:700;cursor:pointer}\n.fune-password-field__toggle:focus-visible{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-password-checklist{margin:.625rem 0 0;padding:0;list-style:none}\n.fune-password-checklist__item{position:relative;margin:0 0 .3125rem;padding-left:1.5rem}\n.fune-password-checklist__item::before{position:absolute;left:0;font-weight:700}\n.fune-password-checklist__item--met::before{content:\"\\2713\"}\n.fune-password-checklist__item--unmet{color:var(--caps-form-muted)}\n.fune-password-checklist__item--unmet::before{content:\"\\2013\"}\n.fune-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;min-height:2.75rem;margin:0 0 1.875rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:var(--caps-form-radius);background:var(--caps-form-accent);color:var(--caps-form-accent-text);font-family:var(--caps-form-font);font-size:1.1875rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}\n.fune-button--secondary{border-color:var(--caps-form-border);background:var(--caps-form-secondary);color:var(--caps-form-text)}\n.fune-button--warning{background:var(--caps-form-error);color:var(--caps-form-accent-text)}\n.fune-button:hover{filter:brightness(.9)}\n.fune-button:focus-visible{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:inset 0 -4px 0 var(--caps-form-focus-text)}\n.fune-button:disabled,.fune-button[aria-disabled=true],.fune-button--loading{opacity:.6;filter:none;cursor:not-allowed}\n.fune-error-summary{margin:0 0 1.875rem;padding:1rem;border:5px solid var(--caps-form-error);color:var(--caps-form-text);font-family:var(--caps-form-font);font-size:1.1875rem;line-height:1.3}\n.fune-error-summary:focus{outline:3px solid var(--caps-form-focus);outline-offset:0;box-shadow:0 0 0 6px var(--caps-form-focus-text)}\n.fune-error-summary-title{margin:0 0 .9375rem;font-size:1.5rem;font-weight:700;line-height:1.25}\n.fune-error-summary-list{margin:0;padding:0;list-style:none}\n.fune-error-summary-list li{margin:0 0 .3125rem}\n.fune-error-summary a{font-weight:700;color:var(--caps-form-error)}\n.fune-error-summary a:focus{outline:3px solid transparent;background:var(--caps-form-focus);color:var(--caps-form-focus-text);box-shadow:0 4px var(--caps-form-focus-text);text-decoration:none}\n"},
  {"name": "a colour that would end the declaration and add a rule is refused", "args": [{"accent": "red;}body{display:none"}], "expectError": "invalid theme.accent: \";\" is not allowed"},
  {"name": "a scope that would close the style element is refused", "args": [{"scope": "</style><script>"}], "expectError": "invalid theme.scope: \"<\" is not allowed"},
  {"name": "a font with a quote left open is refused", "args": [{"font": "\"Helvetica Neue,Arial"}], "expectError": "invalid theme.font: a quote is not closed"},
  {"name": "a scope listing two selectors is refused, since only the first would be scoped", "args": [{"scope": ".a,.b"}], "expectError": "invalid theme.scope: one selector only"},
  {"name": "an unknown dark mode is refused", "args": [{"dark": "auto"}], "expectError": "invalid theme.dark: \"auto\" is not media, attribute or none"},
  {"name": "a comment opener, which would swallow the rest of the stylesheet, is refused", "args": [{"radius": "4px/*"}], "expectError": "invalid theme.radius: \"/*\" is not allowed"},
  {"name": "a newline is refused", "args": [{"focus": "#fd0\n"}], "expectError": "invalid theme.focus: control characters are not allowed"},
  {"name": "a brace in a value is refused", "args": [{"border": "red}"}], "expectError": "invalid theme.border: \"}\" is not allowed"},
  {"name": "a > in a colour is refused (only a scope may use it)", "args": [{"text": "#000>"}], "expectError": "invalid theme.text: \">\" is not allowed"}
]