/* Load after legacy CSS. Scope every rule to opted-in management surfaces. */
.basu-ui {
  box-sizing: border-box;
  color: var(--ui-ink);
  background: var(--ui-bg);
  font-family: var(--ui-font);
  font-size: var(--ui-text);
  line-height: 1.6;
  -webkit-user-select: text;
  user-select: text;
  overflow-wrap: anywhere;
  color-scheme: light;
}
.basu-ui *, .basu-ui *::before, .basu-ui *::after { box-sizing: border-box; }
.basu-ui [hidden] { display: none !important; }
.basu-ui :where(h1, h2, h3, p, figure) { margin: 0; }
.basu-ui :where(h1, h2, h3) { line-height: 1.4; color: var(--ui-heading); }
.basu-ui h1 { font-size: max(1.5rem, 24px); }
.basu-ui h2 { font-size: max(1.125rem, 18px); }
.basu-ui h3 { font-size: var(--ui-text); }
.basu-ui .ui-pixel { font-family: var(--ui-pixel-font); }
.basu-ui :where(small, .ui-note, .muted) { font-size: var(--ui-small); color: var(--ui-muted); }
.basu-ui :where(button, select, input) { font-family: var(--ui-font); font-size: var(--ui-text); }
.basu-ui :where(button, select, input:not([type=checkbox]):not([type=radio])) {
  min-height: var(--ui-hit);
  max-width: 100%;
}
.basu-ui :where(button, select) { min-width: var(--ui-hit); }
.basu-ui .ui-button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ui-hit); min-height: var(--ui-hit); text-decoration: none; }
.basu-ui :where(button, select, input) { accent-color: var(--ui-heading); }
.basu-ui :where(button, a, select, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.basu-ui :where(button, .ui-button) {
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  padding: var(--ui-space-2) var(--ui-space-4);
  color: var(--ui-ink);
  background: var(--ui-surface);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.basu-ui .ui-button--primary { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: #a67522; font-weight: 700; }
.basu-ui .ui-button--danger { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger); }
.basu-ui :where(button, .ui-button)[aria-pressed=true] { background: var(--ui-selection); border-color: #a67522; box-shadow: inset 0 0 0 1px #a67522; }
.basu-ui :where(button, select, input):disabled { color: var(--ui-muted); background: #e8e9ed; border-color: var(--ui-border); cursor: not-allowed; }
@media (hover: hover) {
  .basu-ui button:not(:disabled):hover { border-color: var(--ui-heading); }
}
.basu-ui select { padding: 8px 28px 8px 12px; border: 1px solid var(--ui-border); border-radius: 3px; background: white; color: var(--ui-ink); }
.basu-ui .ui-field { display: grid; gap: var(--ui-space-2); min-width: 0; }
.basu-ui .ui-check { display: flex; align-items: center; gap: 12px; min-height: var(--ui-hit); cursor: pointer; }
.basu-ui .ui-check input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; }
.basu-ui .ui-stack { display: grid; gap: var(--ui-space-4); min-width: 0; }
.basu-ui .ui-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); min-width: 0; }
.basu-ui .ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--ui-space-4); }
.basu-ui .ui-grid > * { min-width: 0; }
.basu-ui .ui-card { padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: 3px; background: var(--ui-surface); min-width: 0; }
.basu-ui .ui-card h2 { margin-bottom: var(--ui-space-3); }
.basu-ui .ui-player-heading { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--ui-space-3); }
.basu-ui .ui-portrait { display: block; width: 64px; height: 64px; image-rendering: pixelated; background: #e7e9ee; }
.basu-ui .ui-status { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--ui-border); border-radius: 2px; font-size: var(--ui-small); line-height: 1.6; color: var(--ui-muted); background: #f0f1f4; }
.basu-ui .ui-status--success { color: var(--ui-success); background: var(--ui-success-bg); border-color: #92b39c; }
.basu-ui .ui-status--warning { color: var(--ui-warning); background: var(--ui-warning-bg); border-color: #c7ac6d; }
.basu-ui .ui-status--danger { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: #d4a09b; }
.basu-ui .ui-stack > .ui-status { justify-self: start; }
.basu-ui .ui-meter { display: grid; gap: var(--ui-space-2); }
.basu-ui .ui-meter__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-2); }
.basu-ui .ui-meter meter { display: block; width: 100%; height: 16px; accent-color: var(--ui-success); }
.basu-ui .ui-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--ui-border); border-radius: 3px; }
.basu-ui table { width: 100%; border-collapse: collapse; font-size: var(--ui-small); line-height: 1.6; font-variant-numeric: tabular-nums; }
.basu-ui .ui-table--wide { min-width: 48rem; }
.basu-ui :where(td, th) { text-align: left; padding: 12px; border-bottom: 1px solid var(--ui-border); font-weight: normal; }
.basu-ui th { color: var(--ui-heading); background: #eef0f5; font-weight: 700; }
.basu-ui caption { text-align: left; padding: 12px; color: var(--ui-muted); }
.basu-ui .ui-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.basu-ui .ui-page { max-width: 1120px; margin: auto; padding: var(--ui-space-6); }
.basu-ui .ui-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid var(--ui-heading); }
.basu-ui .ui-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.basu-ui .ui-nav a { min-height: var(--ui-hit); display: inline-flex; align-items: center; padding: 8px 12px; color: var(--ui-heading); text-underline-offset: 4px; }
.basu-ui .ui-nav [aria-current=page] { font-weight: 700; text-decoration-thickness: 3px; }
@media (max-width: 600px) {
  .basu-ui .ui-page { padding: var(--ui-space-4); }
  .basu-ui .ui-actions > * { flex: 1 1 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .basu-ui *, .basu-ui *::before, .basu-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}