/* ==========================================================================
   reset.css — MR ANALYSIS 360 DESIGN SYSTEM
   --------------------------------------------------------------------------
   A small, modern reset. It mirrors the parts of Tailwind Preflight that the
   existing MR Analysis 360 build already relies on, so the two systems behave
   the same way at the element level.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-border);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-body);
  color-scheme: light;
  /* Prevent any stray element from creating a horizontal scrollbar */
  overflow-x: clip;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings carry no default size or margin: the type classes in base.css
   are the only sanctioned way to style them. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p,
figure,
blockquote,
dl,
dd,
pre {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration: inherit;
}

strong,
b {
  font-weight: var(--fw-semibold);
}

small {
  font-size: var(--text-caption);
}

/* Media never overflows its container — the main cause of horizontal scroll */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Form controls inherit typography and never overflow */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

button,
[role='button'] {
  cursor: pointer;
}

button:disabled,
[role='button']:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

::placeholder {
  opacity: 1; /* Firefox lowers it by default */
  color: var(--color-text-disabled);
}

hr {
  height: 0;
  color: inherit;
  border-top-width: var(--border-hairline);
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}