/* 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; } }


/* Legacy Reservoir Lab button contract.
   Kept byte-for-byte compatible with the pre-refactor styles.css so moving
   Knowledge out of /static does not change its visual behaviour. */
.btn {
  border: 0;
  border-radius: 15px;
  padding: 11px 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  cursor: pointer;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 12px 24px rgba(0,168,181,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0,168,181,.25); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  color: var(--teal-deep);
  background: rgba(255,255,255,.78);
  box-shadow: none;
  border: 1px solid var(--line);
}
.btn.small { padding: 8px 11px; border-radius: 12px; font-size: 12px; }
.btn.warn { background: linear-gradient(135deg, var(--yellow), #ffdd83); color: #5a3a08; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }