/* A2UI surfaces drawn by renderer.js. Only tokens from tokens.css, so it
   works on any Panacea page with or without components.css. */

.a2ui { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); color: var(--ink); }
.a2ui-surface { display: flex; flex-direction: column; gap: var(--space-4); }
.a2ui-surface > * { margin: 0; }

.a2ui-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.a2ui-column { display: flex; flex-direction: column; gap: var(--space-4); }
.a2ui-row > *, .a2ui-column > * { margin: 0; min-width: 0; }
.a2ui-card { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); }
.a2ui-divider { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.a2ui-divider-vertical { border-top: 0; border-left: 1px solid var(--line); width: auto; align-self: stretch; }

.a2ui-text { margin: 0; }
.a2ui-text-heading { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; text-wrap: balance; }
.a2ui-text-subheading { font-weight: 600; font-size: 15px; line-height: 22px; }
.a2ui-text-body { font-size: 15px; line-height: 24px; }
.a2ui-text-caption { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.a2ui-text-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

.a2ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.a2ui-btn > .a2ui-text { font-size: inherit; line-height: inherit; color: inherit; }
.a2ui-btn:hover { border-color: var(--ink-muted); }
.a2ui-btn-primary { background: var(--glacier); border-color: var(--glacier); color: var(--on-glacier); font-weight: 600; }
.a2ui-btn-primary:hover { border-color: var(--glacier); filter: brightness(1.08); }
.a2ui-btn-borderless { border-color: transparent; background: none; color: var(--glacier); padding-inline: var(--space-1); }
.a2ui-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.a2ui-btn:focus-visible, .a2ui-input:focus-visible, .a2ui-choice-chip:focus-visible, .a2ui-tab:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }

.a2ui-field, .a2ui-fieldset { display: flex; flex-direction: column; gap: var(--space-1); }
.a2ui-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.a2ui-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); padding: 0; }
.a2ui-input {
  min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-200); color: var(--ink); font: inherit; font-size: 15px;
}
textarea.a2ui-input { resize: vertical; line-height: 22px; }
.a2ui-input:hover { border-color: var(--ink-muted); }
.a2ui-input[aria-invalid="true"] { border-color: var(--negative); }
.a2ui-check { font-size: 13px; line-height: 18px; color: var(--negative); min-height: 0; }
.a2ui-check:empty { display: none; }

.a2ui-check-row { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; cursor: pointer; }
.a2ui-check-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--glacier); }
.a2ui-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.a2ui-choices-chips { flex-direction: row; flex-wrap: wrap; }
.a2ui-choice-chip {
  padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200);
  color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.a2ui-choice-chip[aria-pressed="true"] { background: var(--glacier-tint); border-color: var(--glacier); font-weight: 600; }

.a2ui-tabbar { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--line); }
.a2ui-tab { padding: var(--space-2) 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.a2ui-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--glacier); }
.a2ui-tabpanel { padding-top: var(--space-3); }

.a2ui-chip { display: inline-block; width: fit-content; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--surface-300); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.a2ui-chip-positive { background: var(--positive-tint); color: var(--positive); }
.a2ui-chip-negative { background: var(--negative-tint); color: var(--negative); }
.a2ui-chip-aurora { background: var(--aurora-tint); color: var(--aurora); }
.a2ui-chip-glacier { background: var(--glacier-tint); color: var(--ink); }

.a2ui-amount, .a2ui-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a2ui-num { text-align: right; }
.a2ui-amount-negative { color: var(--negative); }
.a2ui-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: 14px; line-height: 20px; }
.a2ui-kv dt { color: var(--ink-muted); }
.a2ui-kv dd { margin: 0; }
.a2ui-kv dd.a2ui-num { text-align: left; }

.a2ui-table-scroll { overflow-x: auto; }
.a2ui-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.a2ui-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.a2ui-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.a2ui-table th.a2ui-num { text-align: right; }

.a2ui-pending { color: var(--ink-muted); }
.a2ui-unknown { display: inline-block; padding: 2px 8px; border: 1px dashed var(--negative); border-radius: var(--radius-sm); color: var(--negative); font-size: 13px; }
.a2ui-sent { font-size: 13px; color: var(--ink-muted); }