/* Reusable semantic components. Legacy selectors are grouped without renaming JS hooks. */
.ui-panel,
.ui-card,
:where(.card-surface, .chart-card, .portal-tile, .knowledge-card) {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.ui-panel { border-radius: var(--radius-large); padding: var(--space-5); }
.ui-card { border-radius: var(--radius-large); padding: var(--space-4); }

.ui-button,
:where(.btn) {
  border-radius: var(--radius-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ui-button { min-height:var(--control-height); padding:0 var(--space-4); border:1px solid transparent; cursor:pointer; font-weight:800; }
.ui-button--primary { background:var(--color-accent); color:var(--color-accent-contrast); }
.ui-button--secondary { background:var(--color-surface-secondary); color:var(--color-text-primary); border-color:var(--color-border); }
.ui-button--danger { background:var(--color-danger); color:var(--color-text-inverse); }

.ui-input,
.ui-select,
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.ui-input, .ui-select { min-height:var(--control-height); border:1px solid var(--color-border); border-radius:var(--radius-medium); background:var(--color-surface); padding:0 var(--space-3); }
:where(input, select, textarea):focus { border-color:var(--color-accent); box-shadow:var(--shadow-focus); }
:where(input, textarea)::placeholder { color:var(--color-text-muted); }

.ui-table { width:100%; border-collapse:collapse; color:var(--color-text-primary); }
.ui-table th { color:var(--color-text-secondary); background:var(--color-surface-secondary); }
.ui-table th, .ui-table td { border-bottom:1px solid var(--color-divider); padding:var(--space-3); }

.ui-tabs { display:flex; gap:var(--space-2); border-bottom:1px solid var(--color-divider); }
.ui-tab { color:var(--color-text-secondary); background:transparent; border:0; border-bottom:2px solid transparent; padding:var(--space-3) var(--space-4); }
.ui-tab[aria-selected="true"], .ui-tab.active { color:var(--color-accent-active); border-bottom-color:var(--color-accent); }

.ui-modal { background:var(--color-surface-raised); color:var(--color-text-primary); border:1px solid var(--color-border); border-radius:var(--radius-large); box-shadow:var(--shadow-modal); }
.ui-badge { display:inline-flex; align-items:center; border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--color-accent-soft); color:var(--color-accent-active); }
.ui-alert { border:1px solid var(--color-border); border-radius:var(--radius-medium); padding:var(--space-3) var(--space-4); }
.ui-alert--success { background:var(--color-success-soft); border-color:var(--color-success); }
.ui-alert--warning { background:var(--color-warning-soft); border-color:var(--color-warning); }
.ui-alert--danger { background:var(--color-danger-soft); border-color:var(--color-danger); }
.ui-empty-state { color:var(--color-text-secondary); background:var(--color-surface-secondary); border:1px dashed var(--color-border-strong); border-radius:var(--radius-large); padding:var(--space-6); text-align:center; }


.theme-choice { margin: var(--space-3) 0 0; padding: 0; border: 0; min-width: 0; }
.theme-choice legend { padding: 0; margin: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: 12px; font-weight: 800; }
.theme-choice-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.theme-choice-option { position:relative; display:grid; place-items:center; min-height:36px; padding:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-medium); background:var(--color-surface-secondary); color:var(--color-text-secondary); cursor:pointer; font-size:11px; font-weight:800; text-align:center; }
.theme-choice-option input { position:absolute; opacity:0; pointer-events:none; }
.theme-choice-option:has(input:checked) { color:var(--color-link); border-color:var(--color-accent); background:var(--color-accent-soft); box-shadow:inset 0 0 0 1px var(--color-accent); }
.theme-choice-option:has(input:focus-visible) { outline:2px solid var(--color-accent); outline-offset:2px; }
.theme-choice[aria-busy="true"] { opacity:.68; }
@media (max-width:560px) { .theme-choice-options { grid-template-columns:1fr; } }