/* Reset, document chrome, native control defaults, and the small set of
   utility classes screens are allowed to reach for. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

/* A single, restrained ambient wash behind the shell -- one violet bloom off
   the top-left, no starfield and no blur filter. It sits on its own fixed
   layer behind everything, so it never repaints when content changes. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  pointer-events: none;
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(124, 92, 255, 0.13), transparent 62%),
    radial-gradient(880px 520px at 96% 4%, rgba(56, 189, 248, 0.05), transparent 60%);
}

h1, h2, h3, h4, h5, h6, p, dl, dd, figure {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--primary-hi);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Native controls ---------------------------------------------------
   One base treatment. Component classes adjust size and intent; they do not
   restate the border, background or focus behaviour. */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

input,
select,
textarea {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
}

textarea {
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--line-loud);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled button {
  opacity: 0.45;
  cursor: not-allowed;
}

input::placeholder {
  color: var(--text-3);
}

select {
  appearance: none;
  padding-right: var(--space-6);
  cursor: pointer;
  /* Inline chevron as a data URI: self-contained under the CSP, and no extra
     asset for a 12px glyph. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a2c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

select option {
  background: var(--surface-2);
  color: var(--text);
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

legend {
  padding: 0;
}

/* Text the user may legitimately want to copy out. */
input,
textarea,
.u-selectable {
  user-select: text;
}

/* ---- Scrollbars -------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--surface-4);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---- Utilities ---------------------------------------------------------
   Deliberately few. Anything reached for more than a handful of times becomes
   a component class instead. */

.hidden {
  display: none !important;
}

/* The UA stylesheet's `[hidden] { display: none }` loses to any author rule
   that sets `display`, which every flex/grid component here does. These two
   `!important` declarations are the documented exception: without them, a
   component that sets `.hidden = true` on itself stays visible. */
[hidden] {
  display: none !important;
}

/* Visually hidden but readable by assistive tech -- live regions, and labels
   that would be redundant on screen. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Digits that must not jitter as they tick: metrics, tables, timers. */
.u-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.u-scroll-y {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.u-positive { color: var(--ok); }
.u-negative { color: var(--bad); }
.u-neutral { color: var(--text-3); }