/* Reset, browser surfaces, and the typography scale. */

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
}

body {
    min-width: 320px;
    background: var(--background);
    color: var(--foreground);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Browser surfaces the design system still owns. */
::selection {
    background: color-mix(in oklab, var(--primary) 30%, transparent);
    color: var(--foreground);
}

:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--background),
        0 0 0 4px color-mix(in oklab, var(--ring) 60%, transparent);
    border-radius: var(--radius-sm);
}

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    background-clip: content-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Every figure in this UI sits in a column that must not jitter as it updates. */
.num {
    font-variant-numeric: tabular-nums;
}

.t-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0;
}
.t-base {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
}
.t-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0;
}
.t-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    margin: 0;
}
.t-subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.muted {
    color: var(--muted-foreground);
}
.semibold {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}
.medium {
    font-weight: 500;
}

.c-success {
    color: var(--status-success);
}
.c-error {
    color: var(--status-error);
}
.c-warning {
    color: var(--warning);
}
.c-info {
    color: var(--status-info);
}
.c-primary {
    color: var(--primary);
}
.c-fg {
    color: var(--foreground);
}

.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;
}

.icon {
    display: block;
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .line__pulse {
        animation: none;
        opacity: 0;
    }
    .tooltip,
    .snackbar,
    .card,
    .mode,
    .btn,
    .flow__art,
    .flow__reading,
    .progress__fill,
    .metric__icon,
    .tab {
        transition: none;
    }
}