/* Element defaults and typography (ui.md §2.3). */

/* Derived values (tokens.css holds only the design tokens). */
:root {
  --sv-sticky-top: var(--sv-topbar-height);
  --sv-color-row-hover: #f0f4f7;
  --sv-color-selected: var(--sv-blue-50);
  --sv-color-on-topbar-muted: var(--sv-color-text-muted);
  --sv-color-topbar-hover: var(--sv-color-surface-sunken);
  --sv-radius-xl: 16px;
}

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

html {
  font-family: var(--sv-font-sans);
  font-size: 100%;
  line-height: var(--sv-leading-normal);
  color: var(--sv-color-text);
  background: var(--sv-color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--sv-topbar-height) + var(--sv-space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sv-color-bg);
  font-size: var(--sv-text-md);
  overflow-wrap: break-word;
}

/* Headings: one h1 per page. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--sv-space-3);
  line-height: var(--sv-leading-tight);
  font-weight: var(--sv-weight-semibold);
  color: var(--sv-color-text);
  text-wrap: balance;
}
h1 { font-size: var(--sv-text-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--sv-text-xl); }
h3 { font-size: var(--sv-text-lg); }
h4 { font-size: var(--sv-text-md); }
h5,
h6 { font-size: var(--sv-text-sm); }

@media (min-width: 64em) {
  h1 { font-size: var(--sv-text-3xl); }
}

p,
ul,
ol,
dl,
blockquote,
pre,
figure,
table {
  margin: 0 0 var(--sv-space-4);
}
:where(p, ul, ol, dl, table):last-child { margin-bottom: 0; }
ul,
ol { padding-inline-start: var(--sv-space-6); }
li + li { margin-top: var(--sv-space-1); }
dd { margin-inline-start: 0; }

small { font-size: var(--sv-text-sm); }
strong,
b { font-weight: var(--sv-weight-semibold); }

hr {
  height: 0;
  margin: var(--sv-space-6) 0;
  border: 0;
  border-top: 1px solid var(--sv-color-border);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Links: underlined in running text. */
a {
  color: var(--sv-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}

code,
kbd,
samp,
pre {
  font-family: var(--sv-font-mono);
  font-size: 0.9em;
}
pre {
  overflow: auto;
  padding: var(--sv-space-3);
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-surface-sunken);
}

/* Codes: site code, sample number, program code, sample label. */
.sv-code {
  font-family: var(--sv-font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Numbers, coordinates, counts, costs. */
.sv-num,
td.sv-num,
th.sv-num {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* Form controls inherit typography; 16 px prevents iOS zoom. */
:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
:where(input, select, textarea) { font-size: max(1rem, 16px); }
button { cursor: pointer; }
:where(button, [role="button"]):disabled { cursor: not-allowed; }

/* Focus: always visible, never removed. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--sv-focus-ring);
  border-radius: inherit;
}
/* Forced colors (Windows high contrast): box-shadow is not painted. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}
main:focus-visible,
[tabindex="-1"]:focus-visible:not(a, button) { box-shadow: none; }

[hidden] { display: none !important; }

/* Screen-reader-only text (core class, defined here for the style guide). */
.visually-hidden,
.sv-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  /* -1px: a hidden box after the shell (#sv-announcer) must not add 1px of page scroll. */
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal;
}
.visually-hidden.focusable:is(:focus, :active),
.visually-hidden.focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* Icons (ux_icon() and assets/lib/dom.js icon()). */
.sv-icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sv-icon--sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.sv-icon--lg { width: 1.5rem; height: 1.5rem; }
.sv-icon--xl { width: 3rem; height: 3rem; stroke-width: 1.5; }

::selection { background: #cde4d2; color: var(--sv-color-text); }

/* Skip link: first focusable element. */
.sv-skip-link {
  position: absolute;
  z-index: calc(var(--sv-z-toast) + 1);
  inset-block-start: var(--sv-space-2);
  inset-inline-start: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-4);
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-surface);
  color: var(--sv-color-link);
  font-weight: var(--sv-weight-semibold);
  box-shadow: var(--sv-shadow-lg);
  transform: translateY(-200%);
}
.sv-skip-link:focus,
.sv-skip-link:focus-visible {
  transform: none;
  box-shadow: var(--sv-focus-ring), var(--sv-shadow-lg);
}

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