/* Frequency forms kit (2026) · see forms-demo.html for every state.
   Markup contract (all classes fq- prefixed so they never meet the header/footer):
     .fq-field            stacked label + control + .fq-field__hint / .fq-field__error
     .fq-input            text-like inputs and textarea (also usable alone, e.g. the episode search)
     .fq-select           native <select>: styled closed state everywhere; styled picker where appearance: base-select exists
                          (fine pointers only; touch keeps the OS picker; Firefox/Safari keep the native popup)
     .fq-check / .fq-switch   checkbox + radio / toggle, label wraps the input
     .fq-seg              segmented radio group; .fq-range + <output>
     .fq-form-grid / .fq-form-cols / .fq-form-actions
   Surfaces: dark by default (ink fields, --line-ui borders 3.4–3.6:1 on ink/ink-2). .fq-on-paper flips to paper.
   Validation: :user-invalid / :user-valid after interaction; [aria-invalid="true"] or .fq-field[data-invalid] for scripted errors.
   Targets >= 44px, input text 18px. No transitions. */
:root{
  --fld-h:52px;--fld-px:16px;
  --fld-bg:var(--ink);--fld-ink:var(--paper);--fld-dim:var(--mist);--fld-line:var(--line-ui);--fld-line-hover:var(--paper);
  --fld-label:var(--paper);--fld-hint:var(--mist);--fld-error:var(--ember);--fld-ok:var(--signal);--fld-off-bg:var(--ink-2);--fld-off-line:#4a4740;--fld-off-ink:#9a9387;
  --fld-pick:var(--panel);--fld-on:var(--signal);--fld-on-ink:var(--ink);
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm-.75 3.25h1.5v4h-1.5v-4Zm.75 6.9a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m4.5 7.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
.fq-on-paper{
  --fld-bg:#fffdf8;--fld-ink:var(--ink);--fld-dim:var(--ink-mute);--fld-line:#6d665b;--fld-line-hover:var(--ink);
  --fld-label:var(--ink);--fld-hint:var(--ink-mute);--fld-error:#a32a0b;--fld-ok:#3d5200;--fld-off-bg:#e5ddd0;--fld-off-line:#a39b8c;--fld-off-ink:#5e584f;
  --fld-pick:#fffdf8;--fld-on:var(--ink);--fld-on-ink:var(--signal);
  background:var(--paper);color:var(--ink)}
.fq-on-paper :focus-visible{outline-color:var(--ink)}
@media (prefers-contrast:more){:root{--fld-line:var(--mist)}.fq-on-paper{--fld-line:var(--ink)}}

.fq-field{display:grid;gap:6px;min-width:0;align-content:start}
.fq-field>label,.fq-label{font:600 var(--t-small)/1.3 var(--f-text);color:var(--fld-label)}
.fq-field__opt{font-weight:400;color:var(--fld-hint);margin-left:var(--s1)}
.fq-field__hint,.fq-field__error{font-size:var(--t-small);line-height:1.4;color:var(--fld-hint)}
.fq-field__error{display:none;gap:var(--s2);align-items:flex-start;color:var(--fld-error);font-weight:600}
.fq-field__error::before{content:"";flex:none;width:16px;height:16px;margin-top:.2em;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.fq-field:has(:user-invalid,[aria-invalid="true"]) .fq-field__error,.fq-field[data-invalid] .fq-field__error{display:flex}
.fq-field:has(:user-invalid,[aria-invalid="true"]) .fq-field__hint,.fq-field[data-invalid] .fq-field__hint{display:none}
.fq-field .fq-field__error:empty{display:none!important}

.fq-input{width:100%;min-height:var(--fld-h);padding:0 var(--fld-px);background:var(--fld-bg);color:var(--fld-ink);border:1px solid var(--fld-line);border-radius:var(--r-ctl);font:400 var(--t-body)/1.4 var(--f-text)}
textarea.fq-input{min-height:8rem;padding-block:14px;resize:vertical;field-sizing:content}
.fq-input::placeholder{color:var(--fld-dim);opacity:1}
.fq-input:hover:not(:disabled),.fq-input.is-hover{border-color:var(--fld-line-hover)}
.fq-input:focus-visible,.fq-input.is-focus,.fq-select:focus-visible,.fq-select.is-focus{border-color:var(--fld-ink);outline:var(--focus);outline-offset:2px}
.fq-on-paper .fq-input:focus-visible,.fq-on-paper .fq-input.is-focus,.fq-on-paper .fq-select:focus-visible{outline:3px solid var(--ink)}
.fq-input:user-invalid,.fq-select:user-invalid,.fq-input[aria-invalid="true"],.fq-select[aria-invalid="true"],.fq-field[data-invalid] :where(.fq-input,.fq-select){border-color:var(--fld-error);box-shadow:inset 0 0 0 1px var(--fld-error)}
.fq-input:required:user-valid,.fq-input.is-valid{border-color:var(--fld-ok);box-shadow:inset 4px 0 0 var(--fld-ok)}
.fq-input:disabled,.fq-select:disabled{background-color:var(--fld-off-bg);border-color:var(--fld-off-line);color:var(--fld-off-ink);cursor:not-allowed}
.fq-input:read-only:not(:disabled){border-style:dashed}
.fq-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fld-bg) inset;-webkit-text-fill-color:var(--fld-ink)}
input[type="search"].fq-input::-webkit-search-cancel-button{filter:invert(1)}
.fq-on-paper input[type="search"].fq-input::-webkit-search-cancel-button{filter:none}

.fq-select{appearance:none;width:100%;min-height:var(--fld-h);padding:0 48px 0 var(--fld-px);background:var(--fld-bg);color:var(--fld-ink);border:1px solid var(--fld-line);border-radius:var(--r-ctl);font:400 var(--t-body)/1.4 var(--f-text);cursor:pointer}
.fq-selectbox{position:relative;display:block}
.fq-selectbox::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--fld-ink);-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;pointer-events:none}
.fq-selectbox:has(:disabled)::after{background:var(--fld-off-ink)}
.fq-select:hover:not(:disabled),.fq-select.is-hover{border-color:var(--fld-line-hover)}
.fq-select option{background:var(--fld-bg);color:var(--fld-ink)}
@media (hover:hover) and (pointer:fine){
  @supports (appearance:base-select){
    .fq-select,.fq-select::picker(select){appearance:base-select}
    .fq-select{display:flex;align-items:center;padding-inline-end:var(--fld-px)}
    .fq-selectbox::after{display:none}
    .fq-select::picker-icon{content:"";width:18px;height:18px;margin-inline-start:auto;background:var(--fld-ink);-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
    .fq-select:open::picker-icon{rotate:180deg}
    .fq-select::picker(select){box-sizing:border-box;min-inline-size:anchor-size(width);max-block-size:min(22rem,50svh);margin-block:var(--s1);padding:var(--s1);background:var(--fld-pick);color:var(--fld-ink);border:1px solid var(--fld-line);border-radius:var(--r-ctl);box-shadow:0 16px 40px rgb(0 0 0/.45);font:400 var(--t-body)/1.4 var(--f-text)}
    .fq-select option{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:2px;background:transparent;color:var(--fld-ink);cursor:pointer}
    .fq-select option:hover,.fq-select option:focus-visible{background:var(--line)}
    .fq-on-paper .fq-select option:hover,.fq-on-paper .fq-select option:focus-visible{background:var(--paper-2)}
    .fq-select option:checked{background:var(--fld-on);color:var(--fld-on-ink);font-weight:700}
    .fq-select option:focus-visible{outline:3px solid var(--fld-ink);outline-offset:-3px}
    .fq-select option:disabled{color:var(--fld-off-ink);cursor:not-allowed}
    .fq-select option::checkmark{order:1;margin-inline-start:auto}
    .fq-select optgroup label{display:block;padding:var(--s3) var(--s3) var(--s1);font:700 var(--t-label)/1.3 var(--f-text);color:var(--fld-hint)}
  }
}
@media (forced-colors:active){.fq-select,.fq-select::picker(select){appearance:auto}.fq-selectbox::after{display:none}}

.fq-check,.fq-switch{display:flex;align-items:center;gap:var(--s3);min-height:44px;cursor:pointer;font-size:var(--t-body);line-height:1.35;color:var(--fld-label)}
.fq-check:has(:disabled),.fq-switch:has(:disabled){color:var(--fld-off-ink);cursor:not-allowed}
.fq-check input,.fq-switch input{appearance:none;flex:none;margin:0;display:grid;place-content:center;cursor:inherit;background:var(--fld-bg);border:2px solid var(--fld-line)}
.fq-check input{width:24px;height:24px;border-radius:3px}
.fq-check input[type="radio"]{border-radius:50%}
.fq-check input:hover:not(:disabled),.fq-switch input:hover:not(:disabled){border-color:var(--fld-line-hover)}
.fq-check input[type="checkbox"]::after{content:"";width:16px;height:16px;background:var(--fld-on-ink);scale:0;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.fq-check input[type="checkbox"]:indeterminate::after{-webkit-mask:none;mask:none;width:12px;height:2px;scale:1}
.fq-check input:checked,.fq-check input[type="checkbox"]:indeterminate{background:var(--fld-on);border-color:var(--fld-on)}
.fq-check input[type="checkbox"]:checked::after{scale:1}
.fq-check input[type="radio"]:checked{background:var(--fld-bg);border-color:var(--fld-on);box-shadow:inset 0 0 0 5px var(--fld-on)}
.fq-check input:user-invalid{border-color:var(--fld-error);box-shadow:0 0 0 1px var(--fld-error)}
.fq-check input:disabled,.fq-switch input:disabled{background:var(--fld-off-bg);border-color:var(--fld-off-line)}
.fq-check input:checked:disabled{background:var(--fld-off-line);border-color:var(--fld-off-line);box-shadow:none}
.fq-switch input{position:relative;width:52px;height:30px;border-radius:15px}
.fq-switch input::after{content:"";position:absolute;inset:3px auto 3px 3px;width:20px;border-radius:50%;background:var(--fld-dim)}
.fq-switch input:checked{background:var(--fld-on);border-color:var(--fld-on)}
.fq-switch input:checked::after{translate:22px 0;background:var(--fld-on-ink)}
.fq-switch input:disabled::after{background:var(--fld-off-line)}
.fq-check:has(input:focus-visible) input,.fq-switch:has(input:focus-visible) input{outline:var(--focus);outline-offset:3px}
.fq-on-paper .fq-check:has(input:focus-visible) input,.fq-on-paper .fq-switch:has(input:focus-visible) input{outline-color:var(--ink)}
@media (forced-colors:active){.fq-check input,.fq-switch input{appearance:auto}.fq-switch input::after{display:none}}

.fq-fieldset{border:0;padding:0;margin:0;min-width:0}
.fq-fieldset legend{padding:0;margin-bottom:var(--s2);font:600 var(--t-small)/1.3 var(--f-text);color:var(--fld-label)}
.fq-seg{display:grid;grid-template-columns:repeat(var(--seg-n,3),minmax(0,1fr));border:1px solid var(--fld-line);border-radius:var(--r-ctl);overflow:hidden;background:var(--fld-bg)}
.fq-seg label{position:relative;display:block}
.fq-seg label+label{border-left:1px solid var(--fld-line)}
.fq-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.fq-seg span{display:grid;place-items:center;text-align:center;padding:var(--s2);min-height:var(--fld-h);font:700 var(--t-small)/1.25 var(--f-text);color:var(--fld-ink)}
.fq-seg input:hover+span{background:var(--line)}
.fq-on-paper .fq-seg input:hover+span{background:var(--paper-2)}
.fq-seg input:checked+span{background:var(--fld-on);color:var(--fld-on-ink)}
.fq-seg input:focus-visible+span{outline:var(--focus);outline-offset:-3px}
.fq-seg input:disabled+span{color:var(--fld-off-ink);background:var(--fld-off-bg);cursor:not-allowed}
@media (forced-colors:active){.fq-seg input:checked+span{background:Highlight;color:HighlightText;forced-color-adjust:none}}
.fq-range{width:100%;height:44px;margin:0;accent-color:var(--fld-on)}
.fq-range-ends{display:flex;justify-content:space-between;font-size:var(--t-label);color:var(--fld-hint);font-variant-numeric:tabular-nums}
.fq-calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.fq-calc-row output{font:700 var(--t-body)/1.2 var(--f-text);font-variant-numeric:tabular-nums;color:var(--fld-ink)}

.fq-form-grid{display:grid;gap:var(--s5)}
.fq-form-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:599px){.fq-form-cols{grid-template-columns:minmax(0,1fr)}}
.fq-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.fq-btn[aria-busy="true"]{cursor:progress}
.fq-btn:disabled{background:var(--fld-off-bg);border-color:var(--fld-off-line);color:var(--fld-off-ink);cursor:not-allowed}