/* Upward Design System — component CSS.
   Lifted verbatim from the design system bundle (_ds_bundle.js) so the
   static site renders Button and Input exactly as the canvas does.
   Source of truth: Claude Design → Upward Design System. */

/* Button — components/forms/Button.jsx */
.up-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.up-btn:hover{text-decoration:none}
.up-btn--sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--radius-sm)}
.up-btn--md{height:40px;padding:0 16px;font-size:13.5px}
.up-btn--lg{height:48px;padding:0 22px;font-size:15px}
.up-btn--primary{background:var(--accent);color:#fff}.up-btn--primary:hover{background:var(--accent-hover);color:#fff}.up-btn--primary:active{background:var(--accent-active)}
.up-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-strong)}.up-btn--secondary:hover{background:var(--gray-50)}.up-btn--secondary:active{background:var(--gray-100)}
.up-btn--ghost{background:transparent;color:var(--gray-700)}.up-btn--ghost:hover{background:var(--gray-100);color:var(--text-primary)}.up-btn--ghost:active{background:var(--gray-150)}
.up-btn--destructive{background:var(--negative);color:#fff}.up-btn--destructive:hover{background:var(--red-700)}
.up-btn--inverse{background:#fff;color:var(--ink)}.up-btn--inverse:hover{background:var(--indigo-50);color:var(--ink)}
.up-btn--outline-inverse{background:transparent;color:#fff;border-color:var(--border-inverse)}.up-btn--outline-inverse:hover{background:rgba(255,255,255,.08);color:#fff}
.up-btn[disabled]{opacity:.45;pointer-events:none}
.up-btn--full{width:100%}
.up-btn svg{width:16px;height:16px;flex:none}

/* Input — components/forms/Input.jsx */
.up-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.up-field__label{font-size:13px;font-weight:500;color:var(--text-primary)}
.up-field__box{display:flex;align-items:center;gap:8px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 12px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.up-field__box:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--indigo-100)}
.up-field--error .up-field__box{border-color:var(--negative)}.up-field--error .up-field__box:focus-within{box-shadow:0 0 0 3px var(--negative-soft)}
.up-field__input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--text-primary);height:38px;min-width:0}
.up-field__input::placeholder{color:var(--gray-400)}
.up-field--sm .up-field__input{height:30px;font-size:13px}
.up-field__affix{font-size:13px;color:var(--text-muted);flex:none;display:flex;align-items:center}
.up-field__hint{font-size:12px;color:var(--text-muted)}
.up-field__error{font-size:12px;color:var(--negative)}
.up-field--disabled{opacity:.55;pointer-events:none}

/* Textarea — matches the field box treatment (the canvas used a raw textarea) */
.up-field__textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:1.5;color:var(--ink);padding:10px 12px;border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card);resize:vertical;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.up-field__textarea:focus{outline:0;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--indigo-100)}