/* Reckon — controls: button, toggle, group, and every form input. */

/* ── Button ─────────────────────────────────────────────────────── */
.o-btn{position:relative;display:inline-flex;flex:none;cursor:pointer;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;border-radius:var(--radius-lg);border:1px solid transparent;font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-sm);line-height:1;outline:none;transition:background-color var(--duration-fast),box-shadow var(--duration-fast),color var(--duration-fast);height:var(--control-h);padding-inline:calc(var(--space-3) - 1px)}
.o-btn::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none}
.o-btn>svg{width:16px;height:16px;flex:none;margin-inline:-2px;opacity:.8;pointer-events:none}
.o-btn:focus-visible{box-shadow:0 0 0 1px var(--background),0 0 0 3px var(--ring)}
.o-btn:disabled,.o-btn[aria-disabled=true]{pointer-events:none;opacity:.64}
.o-btn--xs{height:var(--control-h-xs);gap:var(--space-1);border-radius:var(--radius-md);padding-inline:calc(var(--space-2) - 1px);font-size:var(--text-xs)}
.o-btn--xs::before{border-radius:calc(var(--radius-md) - 1px)}
.o-btn--xs>svg{width:14px;height:14px}
.o-btn--sm{height:var(--control-h-sm);gap:var(--space-1-5);padding-inline:calc(var(--space-2-5) - 1px)}
.o-btn--lg{height:var(--control-h-lg);padding-inline:calc(var(--space-3-5) - 1px)}
.o-btn--xl{height:var(--control-h-xl);padding-inline:calc(var(--space-4) - 1px);font-size:var(--text-base)}
.o-btn--xl>svg{width:18px;height:18px}
.o-btn--icon{width:var(--control-h);padding:0}
.o-btn--icon-xs{width:var(--control-h-xs);height:var(--control-h-xs);padding:0;border-radius:var(--radius-md)}
.o-btn--icon-sm{width:var(--control-h-sm);height:var(--control-h-sm);padding:0}
.o-btn--icon-lg{width:var(--control-h-lg);height:var(--control-h-lg);padding:0}
.o-btn--icon-xl{width:var(--control-h-xl);height:var(--control-h-xl);padding:0}

.o-btn--default{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground);box-shadow:var(--inset-highlight),0 1px 2px 0 color-mix(in srgb,var(--primary) 24%,transparent)}
.o-btn--default:hover{background:color-mix(in srgb,var(--primary) 90%,transparent)}
.o-btn--default:active{box-shadow:var(--inset-pressed);background:color-mix(in srgb,var(--primary) 90%,transparent)}
.o-btn--destructive{border-color:var(--destructive);background:var(--destructive);color:#fff;box-shadow:var(--inset-highlight),0 1px 2px 0 color-mix(in srgb,var(--destructive) 24%,transparent)}
.o-btn--destructive:hover{background:color-mix(in srgb,var(--destructive) 90%,transparent)}
.o-btn--destructive:active{box-shadow:var(--inset-pressed)}
.o-btn--outline{border-color:var(--input);background:var(--popover);background-clip:padding-box;color:var(--foreground);box-shadow:var(--shadow-xs)}
.o-btn--outline::before{box-shadow:var(--hairline)}
.o-btn--outline:hover{background:color-mix(in srgb,var(--accent) 50%,var(--popover))}
.o-btn--outline:active{box-shadow:none}
.o-btn--outline:active::before{box-shadow:none}
.o-btn--destructive-outline{border-color:var(--input);background:var(--popover);background-clip:padding-box;color:var(--destructive-foreground);box-shadow:var(--shadow-xs)}
.o-btn--destructive-outline::before{box-shadow:var(--hairline)}
.o-btn--destructive-outline:hover{border-color:color-mix(in srgb,var(--destructive) 32%,transparent);background:color-mix(in srgb,var(--destructive) 4%,var(--popover))}
.o-btn--secondary{border-color:transparent;background:var(--secondary);color:var(--secondary-foreground)}
.o-btn--secondary:hover{background:color-mix(in srgb,var(--foreground) 6%,transparent)}
.o-btn--secondary:active{background:color-mix(in srgb,var(--foreground) 8%,transparent)}
.o-btn--ghost{border-color:transparent;background:transparent;color:var(--foreground)}
.o-btn--ghost:hover{background:var(--accent)}
.o-btn--link{border-color:transparent;background:transparent;color:var(--foreground);padding-inline:0}
.o-btn--link:hover{text-decoration:underline;text-underline-offset:4px}
.o-btn[data-loading]{color:transparent}
.o-btn__spinner{position:absolute;width:16px;height:16px;animation:reckon-spin 1s linear infinite;opacity:1}
.o-btn--default .o-btn__spinner,.o-btn--destructive .o-btn__spinner{color:var(--primary-foreground)}

/* ── Toggle ─────────────────────────────────────────────────────── */
.o-toggle{position:relative;display:inline-flex;flex:none;cursor:pointer;user-select:none;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;border-radius:var(--radius-lg);border:1px solid transparent;background:transparent;font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-sm);color:var(--foreground);height:var(--control-h);min-width:var(--control-h);padding-inline:calc(var(--space-2) - 1px);outline:none;transition:background-color var(--duration-fast),box-shadow var(--duration-fast)}
.o-toggle::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none}
.o-toggle>svg{width:16px;height:16px;flex:none;margin-inline:-2px;opacity:.8}
.o-toggle:hover{background:var(--accent)}
.o-toggle[data-pressed]{background:color-mix(in srgb,var(--input) 64%,transparent);color:var(--accent-foreground)}
.o-toggle--sm{height:var(--control-h-sm);min-width:var(--control-h-sm);padding-inline:calc(var(--space-1-5) - 1px)}
.o-toggle--lg{height:var(--control-h-lg);min-width:var(--control-h-lg);padding-inline:calc(var(--space-2-5) - 1px)}
.o-toggle--outline{border-color:var(--input);background:var(--background);background-clip:padding-box;box-shadow:var(--shadow-xs)}
.o-toggle--outline::before{box-shadow:var(--hairline)}
.o-toggle--outline[data-pressed]{box-shadow:none}
.o-toggle--outline[data-pressed]::before{box-shadow:none}

/* ── Group (button group / input group shell) ───────────────────── */
.o-group{display:flex;width:fit-content}
.o-group--vertical{flex-direction:column}
.o-group>*:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}
.o-group>*:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
.o-group--vertical>*:not(:first-child){border-radius:0 0 var(--radius-lg) var(--radius-lg);margin-block-start:-1px;margin-inline-start:0}
.o-group--vertical>*:not(:last-child){border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.o-group>*:hover,.o-group>*:focus-visible{z-index:1}
.o-group__text{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;border-radius:var(--radius-lg);border:1px solid var(--input);background:var(--muted);background-clip:padding-box;padding-inline:calc(var(--space-3) - 1px);font-size:var(--text-sm);color:var(--muted-foreground);box-shadow:var(--shadow-xs)}

/* ── Field / Label ──────────────────────────────────────────────── */
.o-field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.o-label{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--font-weight-medium);font-size:var(--text-sm);line-height:1;color:var(--foreground)}
.o-field__description{font-size:var(--text-xs);color:var(--muted-foreground)}
.o-field__error{font-size:var(--text-xs);color:var(--destructive-foreground)}
.o-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.o-fieldset__legend{font-weight:var(--font-weight-semibold);color:var(--foreground);padding:0}

/* ── Input / Textarea shell ─────────────────────────────────────── */
.o-input{position:relative;display:inline-flex;width:100%;min-width:0;align-items:center;border-radius:var(--radius-lg);border:1px solid var(--input);background:var(--background);background-clip:padding-box;font-size:var(--text-sm);box-shadow:var(--shadow-xs);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.o-input::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-input:focus-within{border-color:var(--ring);box-shadow:0 0 0 var(--ring-width) var(--ring-color)}
.o-input:focus-within::before{box-shadow:none}
.o-input:has(:disabled){opacity:.64;box-shadow:none}
.o-input[data-invalid]{border-color:color-mix(in srgb,var(--destructive) 36%,transparent)}
.o-input[data-invalid]:focus-within{border-color:color-mix(in srgb,var(--destructive) 64%,transparent);box-shadow:0 0 0 var(--ring-width) color-mix(in srgb,var(--destructive) 16%,transparent)}
.o-input__control{height:calc(var(--control-h) - 2px);width:100%;min-width:0;border:0;border-radius:inherit;background:transparent;padding-inline:calc(var(--space-3) - 1px);font:inherit;color:var(--foreground);outline:none}
.o-input__control::placeholder{color:color-mix(in srgb,var(--muted-foreground) 72%,transparent)}
.o-input--sm .o-input__control{height:calc(var(--control-h-sm) - 2px);padding-inline:calc(var(--space-2-5) - 1px)}
.o-input--lg .o-input__control{height:calc(var(--control-h-lg) - 2px)}
.o-textarea__control{field-sizing:content;min-height:4.5rem;width:100%;resize:vertical;border:0;border-radius:inherit;background:transparent;padding:calc(var(--space-1-5) - 1px) calc(var(--space-3) - 1px);font:inherit;color:var(--foreground);outline:none}
.o-input__addon{display:flex;align-items:center;gap:var(--space-2);color:var(--muted-foreground);flex:none}
.o-input__addon--start{padding-inline-start:calc(var(--space-3) - 1px)}
.o-input__addon--end{padding-inline-end:calc(var(--space-3) - 1px)}
.o-input__addon svg{width:16px;height:16px;opacity:.8}
.o-input__addon--start+.o-input__control{padding-inline-start:var(--space-2)}
.o-input:has(.o-input__addon--end) .o-input__control{padding-inline-end:var(--space-2)}

/* ── Select trigger ─────────────────────────────────────────────── */
.o-select{position:relative;display:inline-flex;width:100%;min-width:9rem;min-height:var(--control-h);cursor:default;user-select:none;align-items:center;justify-content:space-between;gap:var(--space-2);border-radius:var(--radius-lg);border:1px solid var(--input);background:var(--background);background-clip:padding-box;padding-inline:calc(var(--space-3) - 1px);text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--foreground);box-shadow:var(--shadow-xs);outline:none;transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.o-select::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 var(--ring-width) var(--ring-color)}
.o-select:focus-visible::before{box-shadow:none}
.o-select:disabled{pointer-events:none;opacity:.64}
.o-select--sm{min-height:var(--control-h-sm);padding-inline:calc(var(--space-2-5) - 1px)}
.o-select--lg{min-height:var(--control-h-lg)}
.o-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-select__placeholder{color:color-mix(in srgb,var(--muted-foreground) 72%,transparent)}
.o-select>svg{width:16px;height:16px;flex:none;margin-inline-end:-4px;opacity:.8}

/* ── Checkbox / Radio ───────────────────────────────────────────── */
.o-check{position:relative;display:inline-flex;width:16px;height:16px;flex:none;align-items:center;justify-content:center;border-radius:.25rem;border:1px solid var(--input);background:var(--background);background-clip:padding-box;box-shadow:var(--shadow-xs);outline:none;cursor:pointer;padding:0;transition:box-shadow var(--duration-fast)}
.o-check::before{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;box-shadow:var(--hairline)}
.o-check:focus-visible{box-shadow:0 0 0 1px var(--background),0 0 0 3px var(--ring)}
.o-check[data-checked],.o-check[data-indeterminate]{box-shadow:none}
.o-check[data-checked]::before,.o-check[data-indeterminate]::before{box-shadow:none}
.o-check__indicator{position:absolute;inset:-1px;display:none;align-items:center;justify-content:center;border-radius:.25rem;background:var(--primary);color:var(--primary-foreground)}
.o-check[data-checked] .o-check__indicator,.o-check[data-indeterminate] .o-check__indicator{display:flex}
.o-check[data-indeterminate] .o-check__indicator{background:transparent;color:var(--foreground)}
.o-check__indicator svg{width:12px;height:12px;stroke-width:3}
.o-check:disabled{cursor:not-allowed;opacity:.64}
.o-radio{position:relative;display:inline-flex;width:16px;height:16px;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid var(--input);background:var(--background);background-clip:padding-box;box-shadow:var(--shadow-xs);outline:none;cursor:pointer;padding:0;transition:box-shadow var(--duration-fast)}
.o-radio::before{content:"";position:absolute;inset:0;border-radius:var(--radius-full);pointer-events:none;box-shadow:var(--hairline)}
.o-radio:focus-visible{box-shadow:0 0 0 1px var(--background),0 0 0 3px var(--ring)}
.o-radio[data-checked]{box-shadow:none}
.o-radio[data-checked]::before{box-shadow:none}
.o-radio__indicator{position:absolute;inset:-1px;display:none;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--primary)}
.o-radio[data-checked] .o-radio__indicator{display:flex}
.o-radio__indicator::after{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:var(--primary-foreground)}
.o-radio:disabled{cursor:not-allowed;opacity:.64}
.o-radio-group{display:flex;flex-direction:column;gap:var(--space-3)}
.o-choice{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer}

/* ── Switch ─────────────────────────────────────────────────────── */
.o-switch{--thumb:var(--switch-thumb-size);display:inline-flex;height:calc(var(--thumb) + 2px);width:calc(var(--thumb)*2 - 2px);flex:none;align-items:center;border:0;border-radius:var(--radius-full);padding:1px;background:var(--input);cursor:pointer;outline:none;transition:background-color var(--duration-normal)}
.o-switch[data-checked]{background:var(--primary)}
.o-switch:focus-visible{box-shadow:0 0 0 1px var(--background),0 0 0 3px var(--ring)}
.o-switch:disabled{cursor:not-allowed;opacity:.64}
.o-switch__thumb{display:block;aspect-ratio:1;height:100%;border-radius:var(--thumb);background:var(--background);box-shadow:var(--shadow-sm);transition:translate var(--duration-fast),border-radius var(--duration-fast)}
.o-switch[data-checked] .o-switch__thumb{translate:calc(var(--thumb) - 4px) 0}

/* ── Slider ─────────────────────────────────────────────────────── */
.o-slider{display:flex;width:100%;align-items:center;touch-action:none;user-select:none;min-height:20px}
.o-slider__track{position:relative;flex:1;height:4px}
.o-slider__track::before{content:"";position:absolute;inset:0 2px;border-radius:var(--radius-full);background:var(--input)}
.o-slider__indicator{position:absolute;inset-block:0;inset-inline-start:2px;border-radius:var(--radius-full);background:var(--primary)}
.o-slider__thumb{position:absolute;top:50%;display:block;width:16px;height:16px;translate:-50% -50%;border-radius:var(--radius-full);border:1px solid var(--input);background:#fff;box-shadow:var(--shadow-xs);transition:scale var(--duration-instant)}
.o-slider__thumb:active{scale:1.2}

/* ── Number field ───────────────────────────────────────────────── */
.o-numberfield{position:relative;display:flex;width:100%;justify-content:space-between;border-radius:var(--radius-lg);border:1px solid var(--input);background:var(--background);background-clip:padding-box;font-size:var(--text-sm);box-shadow:var(--shadow-xs)}
.o-numberfield::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-numberfield:focus-within{border-color:var(--ring);box-shadow:0 0 0 var(--ring-width) var(--ring-color)}
.o-numberfield:focus-within::before{box-shadow:none}
.o-numberfield__btn{position:relative;display:flex;flex:none;cursor:pointer;align-items:center;justify-content:center;border:0;background:transparent;color:var(--foreground);padding-inline:calc(var(--space-3) - 1px);transition:background-color var(--duration-fast)}
.o-numberfield__btn:first-child{border-start-start-radius:var(--radius-lg-inner);border-end-start-radius:var(--radius-lg-inner)}
.o-numberfield__btn:last-child{border-start-end-radius:var(--radius-lg-inner);border-end-end-radius:var(--radius-lg-inner)}
.o-numberfield__btn:hover{background:var(--accent)}
.o-numberfield__btn svg{width:16px;height:16px;opacity:.8}
.o-numberfield__input{height:calc(var(--control-h) - 2px);width:100%;min-width:0;flex:1;border:0;background:transparent;text-align:center;font:inherit;font-variant-numeric:tabular-nums;color:var(--foreground);outline:none}

/* ── OTP field ──────────────────────────────────────────────────── */
.o-otp{display:flex;align-items:center;gap:var(--space-2)}
.o-otp__input{position:relative;width:var(--control-h);height:var(--control-h);min-width:0;border-radius:var(--radius-lg);border:1px solid var(--input);background:var(--background);background-clip:padding-box;text-align:center;font:inherit;font-size:var(--text-sm);color:var(--foreground);box-shadow:var(--shadow-xs);outline:none;transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.o-otp__input:focus{z-index:10;border-color:var(--ring);box-shadow:0 0 0 var(--ring-width) var(--ring-color)}
.o-otp--lg .o-otp__input{width:var(--control-h-lg);height:var(--control-h-lg);font-size:var(--text-base)}
.o-otp__separator{width:12px;height:2px;flex:none;border-radius:var(--radius-full);background:var(--input)}

/* ── Kbd ────────────────────────────────────────────────────────── */
.o-kbd{pointer-events:none;display:inline-flex;height:20px;min-width:20px;user-select:none;align-items:center;justify-content:center;gap:var(--space-1);border-radius:.25rem;background:var(--muted);padding-inline:var(--space-1);font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-xs);color:var(--muted-foreground)}
.o-kbd-group{display:inline-flex;align-items:center;gap:var(--space-1)}
