@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/fraunces/fraunces-latin-ext-variable.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/fraunces/fraunces-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Spline Sans Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/spline-sans-mono/spline-sans-mono-latin-ext-variable.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Spline Sans Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/spline-sans-mono/spline-sans-mono-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    --paper: #E4E6E1;
    --ink: #1B1F27;
    --ghost: rgba(27, 31, 39, .46);
    --marker: #CFE04A;
    --label: #F5F6F3;

    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --content-width: 68rem;
    --reading-width: 44rem;
    --form-width: 36rem;
    --control-height: 3.5rem;
    --content-top-padding: clamp(2.5rem, 8vw, 6.5rem);
    --settings-topbar-height: 4.25rem;
    --hairline: 1px solid var(--ink);
    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --ease-out: cubic-bezier(.2, .75, .3, 1);
    --ease-in: cubic-bezier(.4, .1, .55, 1);
    --speed-fast: 180ms;
    --speed-base: 420ms;
    --motion-type-caret: 1050ms;
    --motion-content-opacity: 450ms;
    --motion-content-transform: 500ms;
    --motion-exit-opacity: 360ms;
    --motion-exit-transform: 420ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --paper: #14181F;
        --ink: #E4E6E1;
        --ghost: rgba(228, 230, 225, .48);
        --label: #14181F;
    }
}

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

html {
    min-width: 20rem;
    min-height: 100%;
    overflow-x: clip;
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .95rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

button,
[type="button"],
[type="submit"] {
    appearance: none;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-family: var(--display);
    font-variation-settings: "opsz" 20, "SOFT" 45, "WONK" 1;
    font-weight: 400;
    text-wrap: balance;
}

h1 {
    font-size: clamp(3rem, 7vw, 5.75rem);
    line-height: .96;
    letter-spacing: -.025em;
}

h1:focus,
h2:focus,
h3:focus {
    outline: none;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1;
    letter-spacing: -.018em;
}

h3,
h4 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -.012em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: currentColor;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    transition: text-decoration-thickness var(--speed-fast) ease;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--marker);
    outline-offset: 3px;
}

hr {
    height: 1px;
    margin: clamp(1.5rem, 4vw, 2.5rem) 0;
    border: 0;
    background: var(--ink);
    opacity: .25;
}

code {
    padding: .12em .3em;
    border: var(--hairline);
    font-family: var(--mono);
    font-size: .88em;
}

strong {
    font-weight: 500;
}

.page-section {
    width: 100%;
}

html.motion-preparing-content .app-content [data-transition-content] {
    visibility: hidden;
}

html.motion-preparing-stage .app-content :is([data-transition-stage], .motion-stage) {
    visibility: hidden;
}

html.motion-preparing-choice .app-content [data-transition-choice-result] {
    visibility: hidden;
}

html.motion-enabled .app-content .motion-stage:not(.motion-entering):not(.motion-settled) {
    visibility: hidden;
}

html.motion-preparing-stage .app-content .settings-topbar {
    visibility: visible;
    opacity: 1;
    transform: none;
}

html.motion-preparing-stage .app-content .settings-topbar__content {
    opacity: 0;
    transform: translateY(-.9rem);
}

html.motion-enabled.persistent-motion-entering:not(.motion-preparing-stage) .motion-stage:not(.motion-entering):not(.motion-settled) .settings-topbar.motion-item:not(.is-in) {
    opacity: 0;
    transform: translateY(-.9rem);
}

html.motion-enabled .motion-entering:not(.motion-settled) :is(h1, h2, h3, [data-motion-type]):not(:where(.visually-hidden, [hidden], [data-motion-ignore])) {
    visibility: hidden;
}

html.motion-enabled .motion-entering:not(.motion-settled) :is(h1, h2, h3, [data-motion-type]).typing-headline {
    visibility: visible;
}

.typing-character {
    visibility: hidden;
}

.typing-character.is-on,
.motion-settled .typing-character {
    visibility: visible;
}

html.motion-enabled .motion-entering:not(.motion-settled) .typing-character:not(.is-on) {
    visibility: hidden;
}

.typing-caret {
    display: inline-block;
    width: .07em;
    height: .92em;
    margin-left: .045em;
    background: currentColor;
    vertical-align: -.1em;
    animation: typing-caret var(--motion-type-caret) steps(1, end) infinite;
}

html.motion-enabled .motion-entering:not(.motion-settled) .motion-item {
    opacity: 0;
    transform: translateY(-.9rem);
    transition: none !important;
}

html.motion-enabled .motion-entering:not(.motion-settled) .motion-item.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--motion-content-opacity) ease,
        transform var(--motion-content-transform) var(--ease-out) !important;
}

.is-page-leaving {
    pointer-events: none;
    animation:
        page-leave-opacity var(--motion-exit-opacity) ease both,
        page-leave-transform var(--motion-exit-transform) var(--ease-in) both;
}

.is-page-leaving:has(.settings-topbar) {
    animation: none;
}

.is-page-leaving:has(.settings-topbar) :is(.settings-topbar__content, [data-transition-content]) {
    animation:
        page-leave-opacity var(--motion-exit-opacity) ease both,
        page-leave-transform var(--motion-exit-transform) var(--ease-in) both;
}

#page-transition-overlay {
    position: fixed;
    z-index: 9;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#page-transition-overlay:empty {
    display: none;
}

.page-transition-copy {
    position: fixed;
    max-width: none;
    margin: 0;
    overflow: hidden;
    background: var(--paper);
    pointer-events: none;
    animation:
        overlay-leave-opacity var(--motion-exit-opacity) ease both,
        overlay-leave-transform var(--motion-exit-transform) var(--ease-in) both;
}

.page-transition-copy:has(.settings-topbar) {
    overflow: visible;
    background: transparent;
    animation: none;
}

.page-transition-copy:has(.settings-topbar) :is(.settings-topbar__content, [data-transition-content]) {
    animation:
        overlay-leave-opacity var(--motion-exit-opacity) ease both,
        overlay-leave-transform var(--motion-exit-transform) var(--ease-in) both;
}

html.motion-enabled .motion-entering.motion-static-topbar .settings-topbar.motion-item {
    opacity: 1;
    transform: none;
}

.page-header {
    max-width: var(--reading-width);
    margin-bottom: clamp(2rem, 6vw, 4rem);
}

.page-title {
    margin-bottom: 0;
}

.page-intro {
    max-width: 48ch;
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    color: var(--ghost);
}

.section-heading {
    margin-bottom: 1.5rem;
}

.content-column {
    width: 100%;
    max-width: var(--reading-width);
}

.content-column--form {
    max-width: var(--form-width);
}

.prose {
    max-width: 62ch;
}

.prose > * + * {
    margin-top: 1rem;
}

.muted,
.field-help {
    color: var(--ghost);
}

.utility-label {
    display: inline-block;
    color: var(--ghost);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-stack {
    display: grid;
    gap: 1.5rem;
}

.field {
    display: grid;
    gap: .55rem;
}

.field-label {
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.field-help {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
}

.text-input,
.text-area,
.select-input,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    min-height: var(--control-height);
    padding: .9rem 1rem;
    border: var(--hairline);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    caret-color: var(--ink);
    box-shadow: none;
    transition: box-shadow var(--speed-fast) ease, opacity var(--speed-fast) ease;
}

textarea,
.text-area {
    min-height: 8rem;
    resize: vertical;
}

select,
.select-input {
    appearance: none;
    padding-right: 3rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) 50%,
        calc(100% - .85rem) 50%;
    background-repeat: no-repeat;
    background-size: .3rem .3rem, .3rem .3rem;
}

::placeholder {
    color: var(--ghost);
    opacity: 1;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ink);
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .42;
}

.choice-field {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
}

.choice-field input[type="checkbox"],
.choice-field input[type="radio"] {
    appearance: none;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    border: var(--hairline);
    background: transparent;
    cursor: pointer;
}

.choice-field input[type="radio"] {
    border-radius: 50%;
}

.choice-field input:checked {
    box-shadow: inset 0 0 0 .3rem var(--paper);
    background: var(--ink);
}

.valid.modified:not([type="checkbox"]):not([type="radio"]) {
    box-shadow: inset 0 0 0 1px var(--ink);
}

.invalid:not([type="checkbox"]):not([type="radio"]) {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.validation-message,
.validation-summary {
    color: var(--ink);
    font-size: .78rem;
    line-height: 1.5;
}

.validation-message::before {
    content: "! ";
    font-weight: 500;
}

.validation-summary {
    padding: .85rem 0 .85rem 1rem;
    border-left: 3px double var(--ink);
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.2rem;
}

.action {
    display: inline-flex;
    min-width: 10rem;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .9rem 1.5rem;
    border: var(--hairline);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .13em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--speed-fast) ease, box-shadow var(--speed-fast) ease;
}

.action--primary {
    background: var(--ink);
    color: var(--label);
    box-shadow: 0 1px 0 var(--ink);
}

.action--danger {
    box-shadow: inset 0 0 0 1px var(--ink);
}

.action--compact {
    min-width: 0;
    min-height: 2.75rem;
    padding: .7rem 1rem;
    font-size: .7rem;
}

.action--icon {
    min-width: var(--control-height);
    padding: .9rem;
}

.action__icon {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.action--full {
    width: 100%;
}

.action:active {
    transform: translateY(0);
}

.action[aria-busy="true"] {
    cursor: wait;
}

@media (hover: hover) {
    .action:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: inset 0 0 0 1px var(--ink);
    }

    .action--primary:not(:disabled):hover {
        box-shadow: 0 3px 0 var(--ink);
    }

    .action--danger:not(:disabled):hover {
        box-shadow: inset 0 0 0 2px var(--ink);
    }
}

.form-actions,
.record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.form-actions {
    margin-top: .5rem;
}

.form-actions__end {
    margin-inline-start: auto;
}

.status {
    position: relative;
    max-width: var(--reading-width);
    margin-bottom: 2rem;
    padding: .9rem 0 .9rem 1.15rem;
    border-left: var(--hairline);
}

.status:not(.motion-item) {
    animation: status-arrive 300ms var(--ease-out) both;
}

.status::before {
    display: block;
    margin-bottom: .25rem;
    color: var(--ghost);
    font-size: .67rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.status--success::before {
    content: "Saved";
}

.status--error {
    border-left: 3px double var(--ink);
}

.status--error::before {
    content: "Error";
}

.status--warning {
    border-top: var(--hairline);
    border-bottom: var(--hairline);
    border-left: 0;
    padding: 1rem 0;
}

.status--warning::before {
    content: "Important";
}

.settings-layout {
    padding-top: max(0px, calc(var(--settings-topbar-height) + 1.5rem - var(--content-top-padding)));
}

.settings-topbar {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    min-height: var(--settings-topbar-height);
    border-bottom: var(--hairline);
    background: var(--paper);
}

.settings-topbar__content {
    display: flex;
    width: min(100%, calc(var(--content-width) + (2 * var(--gutter))));
    min-height: var(--settings-topbar-height);
    align-items: stretch;
    margin: 0;
    padding: .5rem var(--gutter);
}

.settings-nav {
    min-width: 0;
    flex: 1 1 auto;
}

.settings-nav ul {
    display: flex;
    box-sizing: content-box;
    height: 100%;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: 0 0 .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
}

.settings-nav li {
    display: flex;
    flex: 0 0 auto;
}

.settings-nav a {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: .45rem 0;
    color: var(--ghost);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-nav a.active {
    color: var(--ink);
}

.settings-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: 1;
    bottom: -.5rem;
    left: 0;
    height: 3px;
    background: var(--ink);
    opacity: 0;
    transform: scaleX(.35);
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 180ms var(--ease-out);
}

.settings-nav a.active::after {
    opacity: 1;
    transform: none;
}

.settings-nav a.settings-nav__back-link {
    padding-inline: .75rem;
}

.settings-nav__back-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.settings-content {
    min-width: 0;
    max-width: var(--reading-width);
}

.account-control {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-inline-start: 1rem;
}

.account-control__trigger {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: .45rem .75rem;
    border: 0;
    background: transparent;
    color: var(--ghost);
    cursor: pointer;
}

.account-control__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.account-menu {
    position: fixed;
    inset: var(--settings-topbar-height) var(--gutter) auto auto;
    width: min(12rem, calc(100% - (2 * var(--gutter))));
    margin: 0;
    padding: .45rem 1rem;
    border: var(--hairline);
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    opacity: 0;
    transform: translateY(-.65rem);
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) var(--ease-out),
        overlay var(--speed-fast) allow-discrete,
        display var(--speed-fast) allow-discrete;
}

.account-menu:not(:popover-open) {
    display: none;
    opacity: 0;
    transform: translateY(-.65rem);
}

.account-menu:popover-open {
    display: block;
    opacity: 1;
    transform: none;
}

.account-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-menu li + li {
    border-top: var(--hairline);
}

.account-menu a,
.account-menu button {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    padding: .7rem 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
}

@supports (top: anchor(bottom)) {
    .account-control__trigger {
        anchor-name: --account-menu-trigger;
    }

    .account-menu {
        position-anchor: --account-menu-trigger;
        top: anchor(bottom);
        right: auto;
        bottom: auto;
        left: anchor(right);
        translate: -100% 0;
    }
}

html.motion-enabled.persistent-motion-entering [data-motion-persistent]:not(.is-in) {
    opacity: 0;
    transform: translateY(-.9rem);
}

html.motion-enabled [data-motion-persistent].is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--motion-content-opacity) ease,
        transform var(--motion-content-transform) var(--ease-out);
}

@starting-style {
    .account-menu:popover-open {
        opacity: 0;
        transform: translateY(-.65rem);
    }
}

.record-list {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.record-row {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: var(--hairline);
}

.record-row:first-child {
    border-top: var(--hairline);
}

.record-name {
    overflow-wrap: anywhere;
}

.record-list > li:first-child .record-row {
    border-top: var(--hairline);
}

.invite-record {
    display: block;
    color: var(--ink);
    text-decoration: none;
}

.invite-record:hover .record-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
}

.appointment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.appointment-grid > li {
    display: flex;
    min-width: 0;
}

.appointment-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 1.15rem 1.25rem 1.25rem;
    border: var(--hairline);
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow var(--speed-fast) ease;
}

.appointment-card__time {
    display: block;
    color: inherit;
    text-decoration: none;
}

.appointment-card__day,
.appointment-card__month,
.appointment-card__duration {
    display: block;
    color: var(--ghost);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.appointment-card__day,
.appointment-card__month {
    white-space: nowrap;
}

.appointment-card__date {
    display: block;
    margin-top: .45rem;
    font-family: var(--display);
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-variation-settings: "opsz" 18, "SOFT" 45, "WONK" 1;
    line-height: .88;
    letter-spacing: -.02em;
}

.appointment-card__month {
    margin-top: .2rem;
}

.appointment-card__clock {
    display: block;
    margin-top: 1.05rem;
    font-size: .86rem;
    letter-spacing: .1em;
}

.appointment-card__duration {
    margin-top: .45rem;
}

.appointment-delete-confirmation,
.invite-share-popover {
    display: none;
    position: fixed;
    inset: 0;
    width: min(22rem, calc(100% - 2rem));
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1.5rem;
    overflow: auto;
    border: var(--hairline);
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    opacity: 0;
    transform: translateY(-.65rem);
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) var(--ease-out),
        overlay var(--speed-fast) allow-discrete,
        display var(--speed-fast) allow-discrete;
}

.appointment-delete-confirmation:not(:popover-open),
.invite-share-popover:not(:popover-open) {
    display: none;
    opacity: 0;
    transform: translateY(-.65rem);
}

.appointment-delete-confirmation:popover-open,
.invite-share-popover:popover-open {
    display: block;
    opacity: 1;
    transform: none;
}

.appointment-delete-confirmation::backdrop,
.invite-share-popover::backdrop {
    background-color: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition:
        background-color var(--speed-fast) ease,
        -webkit-backdrop-filter var(--speed-fast) ease,
        backdrop-filter var(--speed-fast) ease;
}

.appointment-delete-confirmation:popover-open::backdrop,
.invite-share-popover:popover-open::backdrop {
    background-color: color-mix(in srgb, var(--paper) 25%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@starting-style {
    .appointment-delete-confirmation:popover-open,
    .invite-share-popover:popover-open {
        opacity: 0;
        transform: translateY(-.65rem);
    }

    .appointment-delete-confirmation:popover-open::backdrop,
    .invite-share-popover:popover-open::backdrop {
        background-color: transparent;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

.appointment-delete-confirmation__question {
    margin: 0;
    font-family: var(--display);
    font-size: 1.3rem;
    font-variation-settings: "opsz" 18, "SOFT" 45, "WONK" 1;
    line-height: 1.25;
}

.appointment-delete-confirmation__actions {
    display: flex;
    gap: .65rem;
    justify-content: center;
    margin-top: 1rem;
}

.invite-share-popover {
    width: min(34rem, calc(100% - 2rem));
}

.invite-share-popover__field {
    margin-top: 1.25rem;
}

.invite-share-popover__url {
    font-size: .78rem;
}

.invite-share-popover__status {
    margin-top: .75rem;
}

@media (hover: hover) {
    .appointment-card:hover {
        box-shadow: inset 0 0 0 1px var(--ink);
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 1rem 0;
    border-bottom: var(--hairline);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--ghost);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.is-hidden {
    display: none !important;
}

.busy-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.spinner {
    width: 1rem;
    height: 1rem;
    border: 1px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.blazor-error-boundary {
    max-width: var(--reading-width);
    padding: 1rem 0 1rem 1.15rem;
    border-left: 3px double var(--ink);
    background: transparent;
    color: var(--ink);
}

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

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 1rem var(--gutter);
    border-top: var(--hairline);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 -.4rem 1.5rem rgba(0, 0, 0, .08);
}

#blazor-error-ui .reload {
    margin-left: .75rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: .65rem;
    right: var(--gutter);
    padding: .25rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 620px) {
    .record-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .record-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 619.98px) {
    .settings-topbar__content {
        gap: .75rem;
    }

    .settings-nav ul {
        gap: .25rem 1rem;
    }

    .account-control {
        margin-inline-start: 0;
    }

}

@keyframes typing-caret {
    0%, 50% {
        opacity: 1;
    }

    50.01%, 100% {
        opacity: 0;
    }
}

@keyframes page-leave-opacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes page-leave-transform {
    from {
        transform: none;
    }

    to {
        transform: translateY(-.7rem);
    }
}

@keyframes overlay-leave-opacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes overlay-leave-transform {
    from {
        transform: none;
    }

    to {
        transform: translateY(-.7rem);
    }
}

@keyframes status-arrive {
    from {
        opacity: 0;
        transform: translateY(-.4rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .typing-character,
    html.motion-enabled .motion-stage .typing-headline,
    html.motion-enabled .motion-stage .motion-item {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .typing-caret,
    #page-transition-overlay {
        display: none !important;
    }
}

@media (forced-colors: active) {
    :focus-visible {
        outline-color: Highlight;
    }

    .action--primary,
    .choice-field input:checked {
        background: ButtonText;
        color: ButtonFace;
    }

    .appointment-delete-confirmation,
    .invite-share-popover,
    .account-menu {
        border: 2px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
}

@media print {
    :root {
        --paper: #fff;
        --ink: #000;
        --ghost: rgba(0, 0, 0, .65);
        --label: #fff;
    }

    body {
        min-height: auto;
    }

    nav,
    button,
    .action,
    .appointment-delete-confirmation,
    .invite-share-popover,
    .account-control,
    .account-menu,
    #blazor-error-ui,
    #page-transition-overlay,
    .typing-caret {
        display: none !important;
    }

    .typing-character,
    .motion-item {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}