/* BASILEUS canonical visual system.
   Source of truth: BASILEUS_DESIGN.md.
   Pure black/white, Helvetica, square controls, hairline technical geometry. */

:root {
  color-scheme: dark;
  --basileus-black: #030303;
  --basileus-black-2: #070707;
  --basileus-black-3: #0d0d0d;
  --basileus-white: #ffffff;
  --basileus-text: #f7f7f7;
  --basileus-muted: rgba(255,255,255,.62);
  --basileus-faint: rgba(255,255,255,.38);
  --basileus-line: rgba(255,255,255,.22);
  --basileus-line-strong: rgba(255,255,255,.52);
  --basileus-line-soft: rgba(255,255,255,.08);
  --basileus-focus: #ffffff;
  --basileus-radius: 0;
  --basileus-font: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --basileus-mono-font: "Share Tech Mono", "Courier New", monospace;
  --basileus-grid: 32px;
}

.basileus-design-system,
body.basileus-monochrome {
  background: var(--basileus-black);
  color: var(--basileus-text);
  font-family: var(--basileus-font);
  letter-spacing: 0;
}

.basileus-design-system *,
.basileus-design-system *::before,
.basileus-design-system *::after,
body.basileus-monochrome *,
body.basileus-monochrome *::before,
body.basileus-monochrome *::after {
  box-shadow: none;
}

.basileus-grid-bg {
  background:
    linear-gradient(var(--basileus-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--basileus-black);
  background-size: var(--basileus-grid) var(--basileus-grid);
}

.basileus-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--basileus-white);
  border: 1px solid var(--basileus-white);
  color: var(--basileus-black);
  font-weight: 800;
  line-height: 1;
}

.basileus-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--basileus-text);
  font-family: var(--basileus-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.basileus-panel,
.basileus-command,
.basileus-control,
.basileus-input,
.basileus-table,
.basileus-chip {
  border: 1px solid var(--basileus-line);
  border-radius: 0;
  background: rgba(3,3,3,.88);
  color: var(--basileus-text);
  box-shadow: none;
}

.basileus-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
}

.basileus-input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--basileus-text);
  font: 16px var(--basileus-font);
}

.basileus-input::placeholder {
  color: var(--basileus-faint);
}

.basileus-button,
.basileus-control {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid var(--basileus-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--basileus-text);
  font: 700 11px var(--basileus-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.basileus-button:hover,
.basileus-button:focus-visible,
.basileus-control:hover,
.basileus-control:focus-visible {
  background: var(--basileus-white);
  color: var(--basileus-black);
  outline: 0;
}

.basileus-button[disabled],
.basileus-control[disabled] {
  opacity: .38;
  cursor: default;
}

.basileus-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 9px;
  color: var(--basileus-muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.basileus-state-dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--basileus-white);
  background: var(--basileus-white);
}

.basileus-state-muted .basileus-state-dot,
.basileus-state-muted {
  opacity: .48;
}

.basileus-hairline {
  border-color: var(--basileus-line);
}

.basileus-rule {
  height: 1px;
  background: var(--basileus-line);
}

.basileus-decal-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
}

.basileus-decal-corner.is-top-left {
  border-left: 1px solid var(--basileus-line);
  border-top: 1px solid var(--basileus-line);
}

.basileus-decal-corner.is-top-right {
  border-right: 1px solid var(--basileus-line);
  border-top: 1px solid var(--basileus-line);
}

.basileus-decal-corner.is-bottom-left {
  border-left: 1px solid var(--basileus-line);
  border-bottom: 1px solid var(--basileus-line);
}

.basileus-decal-corner.is-bottom-right {
  border-right: 1px solid var(--basileus-line);
  border-bottom: 1px solid var(--basileus-line);
}

.basileus-wire-globe {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--basileus-line-strong);
  border-radius: 0;
  background:
    radial-gradient(circle at center, transparent 66%, rgba(255,255,255,.82) 66.3%, rgba(255,255,255,.82) 66.7%, transparent 67%),
    radial-gradient(ellipse 90% 18% at 50% 50%, transparent 48.5%, rgba(255,255,255,.34) 49%, rgba(255,255,255,.34) 49.5%, transparent 50%),
    radial-gradient(ellipse 90% 40% at 50% 50%, transparent 48.5%, rgba(255,255,255,.22) 49%, rgba(255,255,255,.22) 49.5%, transparent 50%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.35) calc(50% - .5px), rgba(255,255,255,.35) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(255,255,255,.28) calc(50% - .5px), rgba(255,255,255,.28) calc(50% + .5px), transparent calc(50% + .5px));
}

.basileus-kv {
  display: grid;
  grid-template-columns: minmax(64px, 96px) minmax(0, 1fr);
  gap: 3px 10px;
  font-size: 11px;
}

.basileus-kv-key {
  color: var(--basileus-muted);
}

.basileus-kv-value {
  color: var(--basileus-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.basileus-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
}

.basileus-control-label {
  width: 80px;
  color: var(--basileus-muted);
}

.basileus-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.basileus-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--basileus-line);
  border-radius: 0;
  background: rgba(3,3,3,.72);
  color: var(--basileus-text);
  font: 12px var(--basileus-mono-font);
  outline: 0;
}

.basileus-search:focus {
  border-color: var(--basileus-line-strong);
}

.basileus-list {
  max-height: 160px;
  margin-top: 6px;
  overflow: auto;
  font-size: 11px;
}

.basileus-list::-webkit-scrollbar {
  width: 4px;
}

.basileus-list::-webkit-scrollbar-thumb {
  background: var(--basileus-line);
}

.basileus-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
  cursor: pointer;
}

.basileus-list-row:hover,
.basileus-list-row.is-active {
  background: rgba(255,255,255,.12);
  color: var(--basileus-white);
}

.basileus-list-meta {
  color: var(--basileus-muted);
}

.basileus-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 10px;
  margin-top: 4px;
}

.basileus-meter-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.08);
}

.basileus-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--basileus-white);
}

.basileus-ticks {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: 6px;
}

.basileus-tick {
  display: block;
  height: 12px;
  background: rgba(255,255,255,.12);
}

.basileus-tick.is-on {
  background: var(--basileus-white);
}

.basileus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.basileus-table th,
.basileus-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--basileus-line);
  text-align: left;
}

.basileus-table th {
  color: var(--basileus-text);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}