/* AnyAPI component classes. Every rule reads from tokens; no raw values except
   where a value is genuinely one-off (arrow geometry, track sizes). */

/* --- base ------------------------------------------------------------- */
.ax-root{background:var(--surface-page);color:var(--text-primary);font:var(--type-body);letter-spacing:var(--tracking-normal);-webkit-font-smoothing:antialiased}
.ax-mono{font-family:var(--font-mono)}
.ax-label-caps{font:var(--type-label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}

/* --- button ----------------------------------------------------------- */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);border:var(--border-hairline) solid transparent;border-radius:var(--control-radius);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control);transition-property:background-color,border-color,color,box-shadow,transform}
.ax-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ax-btn:active:not(:disabled){transform:translateY(1px)}
.ax-btn:disabled,.ax-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.ax-btn--sm{height:var(--control-height-sm);padding:0 var(--space-3);font-size:var(--size-body-sm)}
.ax-btn--md{height:var(--control-height-md);padding:0 var(--space-4);font-size:var(--size-body)}
.ax-btn--lg{height:var(--control-height-lg);padding:0 var(--space-5);font-size:var(--size-subhead)}
.ax-btn--block{width:100%}
.ax-btn--primary{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--lime-600)}
.ax-btn--primary:hover:not(:disabled){background:var(--lime-400)}
.ax-btn--primary:active:not(:disabled){background:var(--lime-600)}
.ax-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-default)}
.ax-btn--secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--ink-300)}
.ax-btn--secondary:active:not(:disabled){background:var(--surface-active)}
.ax-btn--ghost{background:transparent;color:var(--text-secondary)}
.ax-btn--ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}
.ax-btn--inverse{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--ink-900)}
.ax-btn--inverse:hover:not(:disabled){background:var(--ink-700)}
.ax-btn--inverse:focus-visible{box-shadow:var(--focus-ring-inverse)}
.ax-btn--danger{background:var(--danger-500);color:#fff;border-color:var(--danger-600)}
.ax-btn--danger:hover:not(:disabled){background:var(--danger-600)}

/* --- icon button ------------------------------------------------------ */
.ax-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--text-secondary);border:var(--border-hairline) solid transparent;border-radius:var(--control-radius);cursor:pointer;transition:var(--transition-control)}
.ax-iconbtn:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}
.ax-iconbtn:active:not(:disabled){background:var(--surface-active)}
.ax-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ax-iconbtn:disabled{opacity:.4;cursor:not-allowed}
.ax-iconbtn--sm{width:var(--control-height-sm);height:var(--control-height-sm)}
.ax-iconbtn--md{width:var(--control-height-md);height:var(--control-height-md)}
.ax-iconbtn--lg{width:var(--control-height-lg);height:var(--control-height-lg)}
.ax-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.ax-iconbtn--inverse{color:var(--ink-300)}
.ax-iconbtn--inverse:hover:not(:disabled){background:rgba(250,249,246,.08);color:var(--text-inverse)}

/* --- field shell ------------------------------------------------------ */
.ax-field{display:flex;flex-direction:column;gap:var(--space-2)}
.ax-field__label{font:var(--type-caption);color:var(--text-secondary);letter-spacing:var(--tracking-normal)}
.ax-field__req{color:var(--danger-500);margin-left:2px}
.ax-field__hint{font:var(--type-body-sm);color:var(--text-muted)}
.ax-field__error{font:var(--type-body-sm);color:var(--text-danger)}

/* --- input / textarea ------------------------------------------------- */
.ax-input{width:100%;box-sizing:border-box;background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--size-body);border:var(--border-hairline) solid var(--border-default);border-radius:var(--control-radius);transition:var(--transition-control)}
.ax-input::placeholder{color:var(--text-faint)}
.ax-input:hover:not(:disabled){border-color:var(--ink-300)}
.ax-input:focus{outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px var(--lime-300)}
.ax-input:disabled{background:var(--surface-sunken);color:var(--text-faint);cursor:not-allowed}
.ax-input--sm{height:var(--control-height-sm);padding:0 var(--space-2);font-size:var(--size-body-sm)}
.ax-input--md{height:var(--control-height-md);padding:0 var(--space-3)}
.ax-input--lg{height:var(--control-height-lg);padding:0 var(--space-4);font-size:var(--size-subhead)}
.ax-input--mono{font-family:var(--font-mono);font-size:var(--size-body-sm)}
.ax-input--invalid{border-color:var(--danger-500)}
.ax-input--invalid:focus{border-color:var(--danger-600);box-shadow:0 0 0 3px var(--danger-100)}
.ax-input--textarea{height:auto;padding:var(--space-3);line-height:var(--leading-body);resize:vertical}
.ax-input-wrap{position:relative;display:flex;align-items:center}
.ax-input-wrap .ax-input--with-left{padding-left:calc(var(--space-8) + var(--space-px))}
.ax-input-wrap .ax-input--with-right{padding-right:calc(var(--space-8) + var(--space-px))}
.ax-input-affix{position:absolute;display:flex;align-items:center;color:var(--text-faint);pointer-events:none}
.ax-input-affix--left{left:var(--space-3)}
.ax-input-affix--right{right:var(--space-3)}

/* --- select ----------------------------------------------------------- */
.ax-select-wrap{position:relative;display:inline-flex;align-items:center;width:100%}
.ax-select{appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--size-body);border:var(--border-hairline) solid var(--border-default);border-radius:var(--control-radius);padding:0 var(--space-8) 0 var(--space-3);height:var(--control-height-md);cursor:pointer;transition:var(--transition-control)}
.ax-select--sm{height:var(--control-height-sm);font-size:var(--size-body-sm);padding-right:var(--space-7)}
.ax-select--lg{height:var(--control-height-lg);font-size:var(--size-subhead)}
.ax-select:hover:not(:disabled){border-color:var(--ink-300)}
.ax-select:focus{outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px var(--lime-300)}
.ax-select:disabled{background:var(--surface-sunken);color:var(--text-faint);cursor:not-allowed}
.ax-select-caret{position:absolute;right:var(--space-3);color:var(--text-muted);pointer-events:none;display:flex}

/* --- checkbox / radio ------------------------------------------------- */
.ax-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font:var(--type-body);color:var(--text-primary)}
.ax-check--disabled{opacity:.45;cursor:not-allowed}
.ax-check__native{position:absolute;opacity:0;width:0;height:0}
.ax-check__box{flex:none;width:18px;height:18px;margin-top:1px;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:var(--border-hairline) solid var(--ink-300);border-radius:var(--radius-xs);color:var(--text-on-accent);transition:var(--transition-control)}
.ax-check__box--radio{border-radius:var(--radius-pill)}
.ax-check:hover .ax-check__box{border-color:var(--ink-600)}
.ax-check__native:checked+.ax-check__box{background:var(--surface-accent);border-color:var(--lime-600)}
.ax-check__native:focus-visible+.ax-check__box{box-shadow:var(--focus-ring)}
.ax-check__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink-900)}
.ax-check__text{display:flex;flex-direction:column;gap:2px}
.ax-check__desc{font:var(--type-body-sm);color:var(--text-muted)}

/* --- switch ----------------------------------------------------------- */
.ax-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font:var(--type-body)}
.ax-switch--disabled{opacity:.45;cursor:not-allowed}
.ax-switch__track{position:relative;flex:none;width:38px;height:22px;border-radius:var(--radius-pill);background:var(--ink-200);border:var(--border-hairline) solid var(--ink-300);transition:var(--transition-control)}
.ax-switch__track--sm{width:30px;height:18px}
.ax-switch__knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--paper-raised);box-shadow:var(--shadow-1);transition:transform var(--dur-fast) var(--ease-standard)}
.ax-switch__track--sm .ax-switch__knob{width:12px;height:12px}
.ax-switch__native{position:absolute;opacity:0;width:0;height:0}
.ax-switch__native:checked+.ax-switch__track{background:var(--surface-accent);border-color:var(--lime-600)}
.ax-switch__native:checked+.ax-switch__track .ax-switch__knob{transform:translateX(16px)}
.ax-switch__native:checked+.ax-switch__track--sm .ax-switch__knob{transform:translateX(12px)}
.ax-switch__native:focus-visible+.ax-switch__track{box-shadow:var(--focus-ring)}

/* --- card ------------------------------------------------------------- */
.ax-card{background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.ax-card--flat{box-shadow:none}
.ax-card--sunken{background:var(--surface-sunken);box-shadow:none;border-color:var(--border-default)}
.ax-card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);color:var(--text-inverse);box-shadow:none}
.ax-card--accent{background:var(--surface-accent);border-color:var(--lime-600);box-shadow:none}
.ax-card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.ax-card--interactive:hover{box-shadow:var(--shadow-2);border-color:var(--border-default);transform:translateY(-1px)}
.ax-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.ax-card__title{font:var(--type-subhead);letter-spacing:var(--tracking-tight);margin:0}
.ax-card__body{padding:var(--space-5)}
.ax-card__footer{padding:var(--space-4) var(--space-5);border-top:var(--border-hairline) solid var(--border-subtle);display:flex;align-items:center;gap:var(--space-3)}
.ax-card--inverse .ax-card__header,.ax-card--inverse .ax-card__footer{border-color:var(--border-inverse)}

/* --- badge ------------------------------------------------------------ */
.ax-badge{display:inline-flex;align-items:center;gap:var(--space-1);height:20px;padding:0 var(--space-2);border-radius:var(--radius-xs);font:var(--type-label);letter-spacing:var(--tracking-caps);text-transform:uppercase;border:var(--border-hairline) solid transparent}
.ax-badge--pill{border-radius:var(--radius-pill);padding:0 var(--space-3)}
.ax-badge--neutral{background:var(--ink-050);color:var(--text-secondary);border-color:var(--border-default)}
.ax-badge--accent{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--lime-600)}
.ax-badge--success{background:var(--success-100);color:var(--success-600)}
.ax-badge--warn{background:var(--warn-100);color:var(--warn-600)}
.ax-badge--danger{background:var(--danger-100);color:var(--danger-600)}
.ax-badge--info{background:var(--info-100);color:var(--info-600)}
.ax-badge--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.ax-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}

/* --- tag -------------------------------------------------------------- */
.ax-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:24px;padding:0 var(--space-2);background:var(--surface-card);border:var(--border-hairline) solid var(--border-default);border-radius:var(--radius-xs);font:var(--type-code-sm);color:var(--text-secondary)}
.ax-tag--accent{background:var(--surface-accent-soft);border-color:var(--lime-600);color:var(--text-primary)}
.ax-tag--selected{background:var(--surface-inverse);border-color:var(--ink-900);color:var(--text-inverse)}
.ax-tag--clickable{cursor:pointer;transition:var(--transition-control)}
.ax-tag--clickable:hover{border-color:var(--ink-600);color:var(--text-primary)}
.ax-tag__remove{display:flex;align-items:center;background:none;border:0;padding:0;margin-right:-2px;color:inherit;opacity:.55;cursor:pointer}
.ax-tag__remove:hover{opacity:1}

/* --- tabs ------------------------------------------------------------- */
.ax-tabs{display:flex;align-items:center;gap:var(--space-5);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.ax-tabs--pills{gap:var(--space-1);border:0;background:var(--surface-sunken);padding:var(--space-1);border-radius:var(--radius-sm);display:inline-flex}
.ax-tab{position:relative;background:none;border:0;padding:0 0 var(--space-3);font:var(--type-body-strong);color:var(--text-muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard);display:inline-flex;align-items:center;gap:var(--space-2)}
.ax-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--border-thick);background:transparent;transition:background-color var(--dur-fast) var(--ease-standard)}
.ax-tab:hover{color:var(--text-primary)}
.ax-tab:hover::after{background:var(--ink-200)}
.ax-tab[aria-selected="true"]{color:var(--text-primary)}
.ax-tab[aria-selected="true"]::after{background:var(--ink-900)}
.ax-tab:focus-visible{outline:none;color:var(--text-primary);box-shadow:0 0 0 3px var(--lime-300)}
.ax-tabs--pills .ax-tab{padding:0 var(--space-3);height:28px;border-radius:var(--radius-xs);font-size:var(--size-body-sm)}
.ax-tabs--pills .ax-tab::after{display:none}
.ax-tabs--pills .ax-tab[aria-selected="true"]{background:var(--surface-card);box-shadow:var(--shadow-1)}
.ax-tab__count{font:var(--type-code-sm);color:var(--text-faint)}

/* --- dialog ----------------------------------------------------------- */
.ax-veil{position:absolute;inset:0;background:var(--surface-overlay);backdrop-filter:var(--blur-veil);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:50}
.ax-dialog{background:var(--surface-card);border:var(--border-hairline) solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-3);width:100%;max-width:480px;animation:ax-dialog-in var(--dur-base) var(--ease-out)}
@keyframes ax-dialog-in{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.ax-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) var(--space-3)}
.ax-dialog__title{font:var(--type-heading);letter-spacing:var(--tracking-tight);margin:0}
.ax-dialog__desc{font:var(--type-body);color:var(--text-secondary);margin:var(--space-2) 0 0}
.ax-dialog__body{padding:var(--space-2) var(--space-5) var(--space-5)}
.ax-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:var(--border-hairline) solid var(--border-subtle);background:var(--surface-sunken);border-radius:0 0 var(--radius-md) var(--radius-md)}

/* --- toast ------------------------------------------------------------ */
.ax-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-inverse);color:var(--text-inverse);border:var(--border-hairline) solid var(--border-inverse);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-3);min-width:280px;max-width:420px;animation:ax-toast-in var(--dur-base) var(--ease-out)}
@keyframes ax-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ax-toast__icon{display:flex;margin-top:1px;color:var(--lime-500)}
.ax-toast__icon--danger{color:var(--danger-500)}
.ax-toast__icon--warn{color:var(--warn-500)}
.ax-toast__body{display:flex;flex-direction:column;gap:2px;flex:1}
.ax-toast__title{font:var(--type-body-strong)}
.ax-toast__desc{font:var(--type-body-sm);color:var(--text-inverse-muted)}
.ax-toast__close{background:none;border:0;padding:0;color:var(--ink-400);cursor:pointer;display:flex}
.ax-toast__close:hover{color:var(--text-inverse)}

/* --- tooltip ---------------------------------------------------------- */
.ax-tooltip-host{position:relative;display:inline-flex}
.ax-tooltip{position:absolute;z-index:60;background:var(--surface-inverse);color:var(--text-inverse);font:var(--type-body-sm);padding:var(--space-half) var(--space-2);border-radius:var(--radius-xs);white-space:nowrap;box-shadow:var(--shadow-2);pointer-events:none}
.ax-tooltip--top{bottom:calc(100% + var(--space-2));left:50%;transform:translateX(-50%)}
.ax-tooltip--bottom{top:calc(100% + var(--space-2));left:50%;transform:translateX(-50%)}
.ax-tooltip--left{right:calc(100% + var(--space-2));top:50%;transform:translateY(-50%)}
.ax-tooltip--right{left:calc(100% + var(--space-2));top:50%;transform:translateY(-50%)}
.ax-tooltip__key{font-family:var(--font-mono);color:var(--ink-400);margin-left:var(--space-2)}

/* --- code block ------------------------------------------------------- */
.ax-code{background:var(--surface-code);border:var(--border-hairline) solid var(--ink-800);border-radius:var(--radius-md);overflow:hidden;color:var(--code-fg)}
.ax-code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-bottom:var(--border-hairline) solid var(--code-line)}
.ax-code__lang{font:var(--type-label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-400)}
.ax-code__pre{margin:0;padding:var(--space-4);overflow:auto;font:var(--type-code);tab-size:2}
.ax-code__line{display:block;white-space:pre}
.ax-code__ln{display:inline-block;width:2ch;margin-right:var(--space-4);color:var(--ink-600);user-select:none;text-align:right}
.ax-code .tok-key{color:var(--code-keyword)}
.ax-code .tok-str{color:var(--code-string)}
.ax-code .tok-num{color:var(--code-number)}
.ax-code .tok-com{color:var(--code-comment)}
.ax-code .tok-punct{color:var(--code-punct)}
.ax-code__copy{display:inline-flex;align-items:center;gap:var(--space-2);height:26px;padding:0 var(--space-2);background:transparent;border:var(--border-hairline) solid var(--code-line);border-radius:var(--radius-xs);color:var(--ink-300);font:var(--type-code-sm);cursor:pointer;transition:var(--transition-control)}
.ax-code__copy:hover{background:rgba(250,249,246,.06);color:var(--text-inverse)}

/* --- method pill ------------------------------------------------------ */
.ax-method{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:20px;padding:0 var(--space-2);border-radius:var(--radius-xs);font:var(--type-label);letter-spacing:var(--tracking-caps);color:#fff}
.ax-method--get{background:var(--method-get)}
.ax-method--post{background:var(--method-post)}
.ax-method--put{background:var(--method-put)}
.ax-method--patch{background:var(--method-patch)}
.ax-method--delete{background:var(--method-delete)}