:root {
    --typography-color: #52525b;
    --typography-heading: #09090b;
    --typography-strong: #09090b;
    --typography-link: #09090b;
    --typography-link-underline: #e4e4e7;
    --typography-link-underline-hover: #a1a1aa;
    --typography-code: #09090b;
    --typography-thead-border: #e4e4e7;
    --typography-list-marker: #09090b;
    --typography-hr: #e4e4e7
}

.dark {
    --typography-color: #a1a1aa;
    --typography-heading: #fff;
    --typography-strong: #fff;
    --typography-link: #fff;
    --typography-link-underline: #52525b;
    --typography-link-underline-hover: #a1a1aa;
    --typography-code: #fff;
    --typography-thead-border: #27272a;
    --typography-list-marker: #fff;
    --typography-hr: #27272a
}

body {
    font-family: Inter, sans-serif;
    font-feature-settings: "cv11";
    background-color: #ffffff;
}

.dark body {
    background-color: #18181b;
}

/* Native popups such as the option list of a select follow color-scheme, not the page; without it they stay light and Flossy's white dark-mode text is unreadable in them */
.dark {
    color-scheme: dark;
}

/* The native option list of a select ignored the dark theme on Windows (white text on a white list), so selects use Chromium's
   customizable select, whose list is drawn in the page and styled here. The class outweighs Flossy's appearance-none; Flossy draws its
   own chevron, so the built-in icon is hidden. Browsers without base-select keep the native list. */
select.appearance-none,
select::picker(select) {
    appearance: base-select;
}

select::picker-icon,
select option::checkmark {
    display: none;
}

select::picker(select) {
    background-color: #ffffff;
    color: #09090b;
    border: 1px solid rgb(9 9 11 / 0.1);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.dark select::picker(select) {
    background-color: #18181b;
    color: #ffffff;
    border-color: rgb(255 255 255 / 0.1);
}

select option {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: transparent;
    color: inherit;
}

select option:hover,
select option:focus-visible,
select option:checked {
    background-color: #2563eb;
    color: #ffffff;
}

/* Flossy's TableHead ships with dark:bg-zinc-100, which stays white in dark mode; it is sticky, so it needs the page colour rather than transparency */
.dark .sticky.top-0.dark\:bg-zinc-100 {
    background-color: #18181b;
}

.typography {
    font-size: 1rem;
    color: var(--typography-color);
    line-height: 1.75rem;
}

.typography :where(.typography:first-child>:first-child),
.typography :where(li>:first-child) {
    margin-top: 0 !important;
}

.typography :where(.typography>*) {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.typography :where(h1) {
    color: var(--typography-heading);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.typography :where(h3) {
    color: var(--typography-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 4rem;
    margin-bottom: .5rem;
    scroll-margin-top: 6rem;
}

.typography :where(h2+h3) {
    margin-top: 2rem;
}

.typography :where(code:not(pre code)) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    color: var(--typography-code);
    font-weight: 600;
    font-size: 1rem;
}


h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* Guides are written as plain HTML, so their text gets its look here instead of classes on every paragraph */
.guide-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 1rem;
    line-height: 1.75rem;
    color: #52525b;
}

.dark .guide-content {
    color: #a1a1aa;
}

.guide-content :where(h2) {
    margin-top: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #09090b;
    scroll-margin-top: 1.5rem;
}

.guide-content :where(h3) {
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #09090b;
}

.dark .guide-content :where(h2, h3) {
    color: #fff;
}

.guide-content :where(ul) {
    list-style: disc;
    padding-left: 1.25rem;
}

.guide-content :where(ol) {
    list-style: decimal;
    padding-left: 1.25rem;
}

.guide-content :where(li + li) {
    margin-top: 0.5rem;
}

.guide-content :where(strong) {
    font-weight: 600;
    color: #09090b;
}

.dark .guide-content :where(strong) {
    color: #fff;
}

.guide-content :where(a) {
    font-weight: 500;
    color: #08659b;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .guide-content :where(a) {
    color: #50b9f6;
}

/* Separate borders, because collapsed borders ignore border-radius */
.guide-content :where(table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5rem;
}

.guide-content :where(th) {
    text-align: left;
    font-weight: 600;
    color: #09090b;
    background-color: #fafafa;
    border-bottom: 1px solid #e4e4e7;
    padding: 0.625rem 1rem;
}

.guide-content :where(td) {
    vertical-align: top;
    border-bottom: 1px solid #e4e4e7;
    padding: 0.75rem 1rem;
}

.guide-content :where(th + th, td + td) {
    border-left: 1px solid #e4e4e7;
}

.guide-content :where(tr:last-child > td) {
    border-bottom: 0;
}

.dark .guide-content :where(table) {
    border-color: #3f3f46;
}

.dark .guide-content :where(th) {
    color: #fff;
    background-color: #27272a;
}

.dark .guide-content :where(th, td) {
    border-color: #3f3f46;
}

/* Callouts bring their own colours, which the guide text colour above must not override */
.guide-content .callout-body :where(p, li, strong) {
    color: inherit;
}

/* Inline code moves to the next line as a whole instead of breaking, where its border and background would look cut off */
.guide-content :where(code) {
    white-space: nowrap;
}

/* Public pages: motion only where it shows what Connect does, and none for people who ask for reduced motion */

/* Home hero: a click in the Exquise toolbar opens the app, signed in on the open patient, then the story repeats */
@keyframes demo-cursor {
    0% { opacity: 0; transform: translate(9rem, 7rem); }
    8% { opacity: 1; }
    24% { transform: translate(0, 0); }
    27% { transform: translate(0, 0) scale(0.85); }
    30% { transform: translate(0, 0) scale(1); }
    72% { opacity: 1; transform: translate(0, 0); }
    80%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes demo-press {
    0%, 26% { box-shadow: 0 0 0 0 rgb(10 129 196 / 0); }
    28% { box-shadow: 0 0 0 4px rgb(10 129 196 / 0.35); }
    40%, 100% { box-shadow: 0 0 0 12px rgb(10 129 196 / 0); }
}

@keyframes demo-panel {
    0%, 31% { opacity: 0; transform: translateY(1rem) scale(0.98); }
    38%, 86% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: none; }
}

@keyframes demo-signed-in {
    0%, 42% { opacity: 0; transform: translateY(0.25rem); }
    47%, 86% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; }
}

@keyframes demo-patient {
    0%, 50% { opacity: 0; transform: translateY(0.25rem); }
    55%, 86% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; }
}

.demo-cursor { animation: demo-cursor 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.demo-press { animation: demo-press 8s ease-out infinite; }
.demo-panel { animation: demo-panel 8s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.demo-signed-in { animation: demo-signed-in 8s ease-out infinite; }
.demo-patient { animation: demo-patient 8s ease-out infinite; }

/* A document drops into the patient record: what "no saving, no uploading" looks like */
@keyframes doc-drop {
    0% { opacity: 0; transform: translateY(-1.75rem); }
    15% { opacity: 1; }
    45%, 70% { opacity: 1; transform: translateY(0); }
    85%, 100% { opacity: 0; transform: translateY(0) scale(0.9); }
}

.doc-drop { animation: doc-drop 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }

/* Sections ease in as they scroll into view; browsers without scroll timelines show them right away */
@keyframes reveal {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: none; }
}

@keyframes grow-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 20%;
        }

        .grow-x {
            transform-origin: left;
            animation: grow-x linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 45%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-cursor { display: none; }

    .demo-press,
    .demo-panel,
    .demo-signed-in,
    .demo-patient,
    .doc-drop {
        animation: none;
    }
}

/* Flossy's Icon replaces any style it is given and sizes itself at 24px, so larger icons are sized from their wrapper */
.icon-2xl > [data-slot="icon"] { font-size: 1.5rem; }
.icon-3xl > [data-slot="icon"] { font-size: 1.875rem; }
.icon-4xl > [data-slot="icon"] { font-size: 2.25rem; }