/* Rettangoli UI base reset. Load before any theme file. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --width-stretch: 100%;
  --scrollbar-size: 6px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--muted-foreground);
  --scrollbar-thumb-hover: var(--ring);
}

@supports (width: -webkit-fill-available) {
  :root {
    --width-stretch: -webkit-fill-available;
  }
}

@supports (width: -moz-available) {
  :root {
    --width-stretch: -moz-available;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared presentation rules that consume theme tokens. */
html {
  height: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: auto;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: var(--font-family-sans);
  font-size: var(--md-font-size);
  font-weight: var(--md-font-weight);
  line-height: var(--md-line-height);
  letter-spacing: var(--md-letter-spacing);
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 4px !important;
  background: transparent !important;
}

::selection {
  background-color: var(--selection, var(--foreground));
  color: var(--selection-foreground, var(--background));
}

::-moz-selection {
  background-color: var(--selection, var(--foreground));
  color: var(--selection-foreground, var(--background));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding-bottom: var(--spacing-sm);
  font-family: var(--font-family-sans);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

p,
li {
  font-size: var(--md-font-size);
  font-weight: var(--md-font-weight);
  line-height: var(--md-line-height);
  letter-spacing: var(--md-letter-spacing);
}

p {
  margin: 0 0 var(--spacing-lg);
  line-height: 1.65;
}

ul,
ol {
  margin: 0 0 var(--spacing-lg);
  padding-left: 1.25rem;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  margin: 0;
}

li + li {
  margin-top: var(--spacing-md);
}

li > ul,
li > ol {
  margin-top: var(--spacing-md);
}

blockquote {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--primary);
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-style: italic;
  width: var(--width-stretch);
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: var(--spacing-sm);
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.8;
}

table {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  background-color: var(--background);
}

th,
td {
  padding: var(--spacing-md);
  text-align: left;
  border: 1px solid var(--border);
}

th {
  background-color: var(--muted);
  font-weight: var(--md-font-weight);
  color: var(--muted-foreground);
}

tr:nth-child(even) {
  background-color: var(--background);
}

pre {
  margin: 0 0 var(--spacing-lg);
  white-space: pre;
  font-size: var(--sm-font-size);
  font-weight: var(--sm-font-weight);
  line-height: 1.2;
  letter-spacing: var(--sm-letter-spacing);
  padding: var(--spacing-lg);
  flex: 1;
  min-height: fit-content;
  max-width: var(--width-stretch);
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.rtgl-code-preview {
  margin-bottom: var(--spacing-lg);
}

.rtgl-code-preview pre {
  margin-bottom: 0;
  padding-bottom: var(--spacing-lg);
}

code:not(pre code) {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: var(--sm-font-size);
  font-weight: var(--sm-font-weight);
  line-height: 1.2;
  letter-spacing: var(--sm-letter-spacing);
  background-color: var(--muted);
  padding: 0.1em 0.35em;
  border-radius: var(--border-radius-sm);
  display: inline;
}

a {
  color: var(--anchor-color, inherit);
  text-decoration: var(--anchor-text-decoration, underline);
}

a:hover {
  color: var(--anchor-color-hover, var(--anchor-color, inherit));
  text-decoration: var(--anchor-text-decoration-hover, underline);
}

/* Keep docs side rails pinned while content scrolls. */
rtgl-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

rtgl-page-outline {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}