/* AIR component mini-library — flat CSS recreation for preview cards + UI kit.
   Mirrors air-* Lit components but as plain classes. Requires colors_and_type.css. */

.air-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--air-spacing-small);
  font-family:var(--air-font-family);font-weight:600;line-height:1.4;
  border:1px solid transparent;border-radius:var(--air-corner-button);cursor:pointer;
  white-space:nowrap;text-decoration:none;
  transition:background-color 150ms var(--air-motion-easing-standard),
             border-color 150ms var(--air-motion-easing-standard),
             transform 120ms var(--air-motion-easing-standard);
}
.air-btn:active:not(:disabled):not(.disabled){transform:scale(.97)}
.air-btn.primary{background:var(--air-button-primary);border-color:var(--air-button-primary);color:var(--air-text-on-color)}
.air-btn.primary:hover:not(:disabled):not(.disabled){background:var(--air-button-primary-hover);border-color:var(--air-button-primary-hover)}
.air-btn.outlined{background:transparent;border-color:var(--air-button-outlined);color:var(--air-text-primary)}
.air-btn.outlined:hover:not(:disabled):not(.disabled){background:var(--air-button-outlined-hover)}
.air-btn.text{background:transparent;border-color:transparent;color:var(--air-text-button)}
.air-btn.text:hover:not(:disabled):not(.disabled){text-decoration:underline}
.air-btn.danger{background:var(--air-status-error);border-color:var(--air-status-error);color:#fff}
.air-btn.disabled,.air-btn:disabled{background:var(--air-button-disabled);border-color:var(--air-button-disabled);color:var(--air-text-disabled);cursor:not-allowed}

.air-btn.size-x-large{height:80px;min-width:196px;padding:0 48px;font-size:18px}
.air-btn.size-large{height:48px;min-width:129px;padding:0 24px;font-size:14px}
.air-btn.size-small{height:40px;min-width:106px;padding:0 16px;font-size:14px}
.air-btn.size-x-small{height:32px;min-width:90px;padding:0 12px;font-size:14px}
.air-btn.primary.size-x-large:hover:not(:disabled):not(.disabled){
  background:var(--air-gradient-aura);border-color:transparent;color:var(--air-text-primary)
}

.air-card{
  background:var(--air-container-secondary);border-radius:var(--air-corner-container);
  padding:var(--air-spacing-x-large);color:var(--air-text-primary);
  font-family:var(--air-font-family)
}
.air-card.compact{padding:var(--air-spacing-large)}
.air-card.interactive{cursor:pointer;transition:background-color 150ms var(--air-motion-easing-standard)}
.air-card.interactive:hover{background:var(--air-surface-dim)}
.air-card-title{font:var(--air-type-heading-4);letter-spacing:-0.02em;margin:0 0 8px}
.air-card-body{font:var(--air-type-body-2);color:var(--air-text-secondary);margin:0}

.air-list-item{
  background:var(--air-container-secondary);border-radius:var(--air-corner-list-menu);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  color:var(--air-text-primary);transition:background-color 150ms var(--air-motion-easing-standard);
  font-family:var(--air-font-family)
}
.air-list-item:hover{background:var(--air-surface-dim)}
.air-list-item .leading{width:40px;height:40px;border-radius:var(--air-corner-logo-image);background:var(--air-surface-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.air-list-item .leading img{width:100%;height:100%;object-fit:cover}
.air-list-item .content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.air-list-item .primary-text{font:var(--air-type-body-2);color:var(--air-text-primary)}
.air-list-item .secondary-text{font:var(--air-type-helper);color:var(--air-text-secondary)}
.air-list-item .trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--air-icon-primary)}
.air-list-item .amount{font:var(--air-type-body-2);color:var(--air-text-primary)}
.air-list-item .amount-sub{font:var(--air-type-helper);color:var(--air-text-secondary)}

.air-input-wrap{position:relative;display:flex;flex-direction:column;gap:6px;font-family:var(--air-font-family)}
.air-input-label{font:var(--air-type-subhead-1);letter-spacing:-0.02em;color:var(--air-text-primary)}
.air-input{
  height:48px;padding:0 16px;border-radius:var(--air-corner-small);
  border:1px solid var(--air-outline-default);background:var(--air-container-secondary);
  font:var(--air-type-body-1);color:var(--air-text-primary);
  transition:border-color 150ms var(--air-motion-easing-standard);outline:none;width:100%;box-sizing:border-box
}
.air-input::placeholder{color:var(--air-text-placeholder)}
.air-input:focus{border-color:var(--air-outline-focus);border-width:1.5px}
.air-input.error{border-color:var(--air-status-error)}
.air-helper-text{font:var(--air-type-helper);color:var(--air-text-secondary)}
.air-helper-text.error{color:var(--air-status-error)}

.air-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--air-corner-small);
  background:var(--air-surface-dim);color:var(--air-text-secondary);
  font:var(--air-type-helper)
}
.air-chip.success{background:var(--air-status-success-5);color:var(--air-status-success)}
.air-chip.error{background:var(--air-status-error-5);color:var(--air-status-error)}
.air-chip.pending{background:var(--air-status-pending-5);color:var(--air-status-pending)}
.air-chip.warning{background:var(--air-status-warning-5);color:#9a7a00}

.air-banner{
  display:flex;gap:12px;padding:12px 16px;border-radius:var(--air-corner-list-menu);
  font-family:var(--air-font-family)
}
.air-banner.info{background:var(--air-decorative-blue-5);color:var(--air-text-primary)}
.air-banner.success{background:var(--air-status-success-5);color:#0a6b3e}
.air-banner.error{background:var(--air-status-error-5);color:#9a1f1f}
.air-banner.warning{background:var(--air-status-warning-5);color:#7a5500}

/* === Dashboard navigation rail === */
.air-nav-rail{
  width:260px;background:var(--air-container-secondary);
  padding:var(--air-spacing-2x-large) var(--air-spacing-large);
  display:flex;flex-direction:column;gap:var(--air-spacing-2x-large);
  font-family:var(--air-font-family);min-height:400px
}
.air-nav-section{display:flex;flex-direction:column;gap:var(--air-spacing-x-small)}
.air-nav-section-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--air-spacing-medium);height:28px;
  font:var(--air-type-helper);color:var(--air-text-secondary);
  background:none;border:none;cursor:pointer;width:100%;border-radius:var(--air-corner-small);
  transition:background var(--air-motion-duration-fast) var(--air-motion-easing-standard),
             color var(--air-motion-duration-fast) var(--air-motion-easing-standard)
}
.air-nav-section-label:hover{background:var(--air-surface);color:var(--air-text-primary)}
.air-nav-item{
  display:flex;align-items:center;gap:var(--air-spacing-medium);
  padding:var(--air-spacing-x-small) var(--air-spacing-medium);height:32px;
  font:var(--air-type-body-2);color:var(--air-text-secondary);
  background:none;border:none;cursor:pointer;border-radius:var(--air-corner-small);
  text-decoration:none;width:100%;text-align:left;
  transition:background var(--air-motion-duration-fast) var(--air-motion-easing-standard),
             color var(--air-motion-duration-fast) var(--air-motion-easing-standard)
}
.air-nav-item:hover:not(.disabled){background:var(--air-surface);color:var(--air-text-primary)}
.air-nav-item.active{color:var(--air-text-primary);font-weight:600}
.air-nav-item.disabled{color:var(--air-text-disabled);pointer-events:none}

/* === Modal shell (SDK / desktop) === */
.air-modal-shell{
  width:393px;border-radius:var(--air-corner-container);
  background:var(--air-container-secondary);
  overflow:hidden;display:flex;flex-direction:column;
  max-height:calc(100dvh - 96px)
}
.air-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--air-spacing-large);flex-shrink:0
}
.air-modal-content{flex:1;overflow-y:auto;padding:var(--air-spacing-2x-large)}
.air-modal-footer{
  flex-shrink:0;padding:var(--air-spacing-x-large) var(--air-spacing-2x-large) var(--air-spacing-2x-large);
  display:flex;flex-direction:column;gap:var(--air-spacing-small)
}
.air-powered{
  font:var(--air-type-helper);color:var(--air-text-secondary);
  text-align:center;margin-top:var(--air-spacing-x-large)
}

.air-checkbox,.air-radio{
  width:20px;height:20px;border:1.5px solid var(--air-outline-default);
  background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all 150ms var(--air-motion-easing-standard);flex-shrink:0
}
.air-checkbox{border-radius:6px}
.air-radio{border-radius:50%}
.air-checkbox.checked,.air-radio.checked{background:var(--air-text-primary);border-color:var(--air-text-primary)}
.air-checkbox.checked svg{color:#fff}
.air-radio.checked::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}

/* === Spinner (air-spinner) ===
   Drop the AIR gradient-arc SVG inside; the wrapper spins it. size-large adds a center wallet tile. */
.air-spinner{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0;overflow:hidden}
.air-spinner .air-spinner-arc{width:100%;height:100%;display:block;animation:air-spin 1s linear infinite;transform-origin:center}
@keyframes air-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.air-spinner.size-x-small{width:16px;height:16px}
.air-spinner.size-small{width:24px;height:24px}
.air-spinner.size-default{width:40px;height:40px}
.air-spinner.size-large{width:80px;height:80px}
.air-spinner .air-spinner-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.air-spinner .air-spinner-center-icon{
  width:var(--air-icon-large);height:var(--air-icon-large);border-radius:var(--air-corner-logo-image);
  border:1px solid var(--air-border-divider);background:var(--air-container-primary);color:var(--air-icon-primary);
  display:inline-flex;align-items:center;justify-content:center
}
.air-spinner .air-spinner-center-icon svg{width:14px;height:14px;display:block}

/* === Loader (air-loader / loading aura) ===
   Self-cycling gradient aura with the AIR logomark centered. SVG aura is supplied inline. */
.air-loader{display:inline-flex;flex-direction:column;align-items:center;gap:var(--air-spacing-2x-large);text-align:center;font-family:var(--air-font-family)}
.air-loading-aura{position:relative;display:inline-flex;align-items:center;justify-content:center}
.air-loading-aura .aura{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.air-loading-aura .mark{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.air-loader-caption-primary{font:var(--air-type-heading-3);letter-spacing:-0.04em;color:var(--air-text-primary)}
.air-loader-caption-secondary{font:var(--air-type-body-2);color:var(--air-text-secondary);margin-top:var(--air-spacing-x-small)}

/* === Powered by AIR (air-powered-by) ===
   Brand identifier for modal footers. Composes "Powered by" + the AIR logotype, inheriting text color. */
.air-powered-by{display:inline-flex;align-items:center;gap:var(--air-spacing-x-small);color:var(--air-text-secondary);white-space:nowrap}
.air-powered-by .pb-text{font:var(--air-type-helper)}
.air-powered-by .pb-mark{height:12px;width:auto;display:block}
.air-powered-by.on-color{color:var(--air-text-on-color)}

/* === Partner logo (air-partner-logo) ===
   Always 60x60, 16px radius. Falls back to a watermark tile when no image. */
.air-partner-logo{
  width:60px;height:60px;border-radius:var(--air-corner-logo-image);
  object-fit:cover;display:block;background:var(--air-surface-dim);flex-shrink:0
}
.air-partner-logo-fallback{
  width:60px;height:60px;border-radius:var(--air-corner-logo-image);
  background:var(--air-surface-dim);color:var(--air-surface);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.air-partner-logo-fallback svg{width:32px;height:32px;display:block}

/* === Tooltip (air-tooltip) ===
   Inverse bubble + pre-oriented arrow. Hugs content, caps at 240px. */
.air-tooltip{position:relative;display:inline-flex}
.air-tooltip-bubble{
  background:var(--air-container-inverse);color:var(--air-text-on-color);
  padding:var(--air-spacing-small) var(--air-spacing-medium);border-radius:var(--air-corner-small);
  width:max-content;max-width:240px;font:var(--air-type-helper);position:relative
}
.air-tooltip-bubble .tip-title{font:var(--air-type-subhead-2);letter-spacing:-0.02em;margin-bottom:var(--air-spacing-x-small);color:var(--air-text-on-color)}
.air-tooltip-arrow{display:block;color:var(--air-container-inverse)}
.air-tooltip-arrow svg{display:block;fill:currentColor}
/* Interactive hover variant: hidden bubble shown on trigger hover/focus */
.air-tooltip-hover{position:relative;display:inline-flex}
.air-tooltip-hover .air-tooltip-pop{
  position:absolute;left:50%;bottom:calc(100% + var(--air-spacing-x-small));transform:translate(-50%,4px);
  display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;
  transition:opacity var(--air-motion-duration-instant) var(--air-motion-easing-standard),
             transform var(--air-motion-duration-instant) cubic-bezier(0.16,1,0.3,1);
  z-index:10
}
.air-tooltip-hover:hover .air-tooltip-pop,
.air-tooltip-hover:focus-within .air-tooltip-pop{opacity:1;transform:translate(-50%,0)}

/* === Table (air-table) === */
.air-table-panel{
  border-radius:var(--air-corner-list-menu);background:var(--air-container-secondary);
  border:1px solid var(--air-border-divider);overflow:hidden
}
.air-table-scroll{overflow-x:auto}
.air-table{width:100%;border-collapse:collapse;font-family:var(--air-font-family);min-width:var(--air-table-min-width,820px)}
.air-table thead th{
  font:var(--air-type-subhead-2);letter-spacing:-0.02em;color:var(--air-text-secondary);
  text-align:left;padding:var(--air-spacing-medium) var(--air-spacing-large);
  border-bottom:1px solid var(--air-border-divider);white-space:nowrap;background:var(--air-container-secondary)
}
.air-table th.num,.air-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.air-table tbody td{
  font:var(--air-type-body-2);color:var(--air-text-primary);
  padding:var(--air-spacing-medium) var(--air-spacing-large);
  border-bottom:1px solid var(--air-border-divider);white-space:nowrap
}
.air-table tbody tr:last-child td{border-bottom:none}
.air-table tbody tr:hover{background:var(--air-container-primary)}
.air-table td.primary{font:var(--air-type-subhead-1);letter-spacing:-0.02em}
.air-table td.mono-cell{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:13px;color:var(--air-text-secondary)}
.air-table .copy-cell{display:inline-flex;align-items:center;gap:var(--air-spacing-small)}
.air-table .copy-btn{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--air-corner-small);
  border:none;background:none;color:var(--air-icon-secondary);cursor:pointer;flex-shrink:0;
  transition:background var(--air-motion-duration-fast) var(--air-motion-easing-standard),color var(--air-motion-duration-fast) var(--air-motion-easing-standard)
}
.air-table .copy-btn:hover{background:var(--air-surface-dim);color:var(--air-icon-primary)}
.air-table-pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--air-spacing-medium) var(--air-spacing-large);border-top:1px solid var(--air-border-divider);
  font:var(--air-type-helper);color:var(--air-text-secondary)
}
.air-table-pagination .pager{display:flex;align-items:center;gap:var(--air-spacing-small)}
.air-table-pagination .pager-btn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--air-corner-small);
  border:1px solid var(--air-border-divider);background:var(--air-container-secondary);color:var(--air-icon-primary);cursor:pointer;
  transition:background var(--air-motion-duration-fast) var(--air-motion-easing-standard)
}
.air-table-pagination .pager-btn:hover:not(:disabled){background:var(--air-container-primary)}
.air-table-pagination .pager-btn:disabled{color:var(--air-text-disabled);cursor:not-allowed;border-color:var(--air-border-divider)}