@font-face { font-family: 'Open Runde'; src: url('/apps/web/assets/fonts/OpenRunde-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('/apps/web/assets/fonts/OpenRunde-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('/apps/web/assets/fonts/OpenRunde-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('/apps/web/assets/fonts/OpenRunde-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Faculty Glyphic'; src: url('/apps/web/assets/fonts/FacultyGlyphic-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

/* ==========================================================================
   Jules redesign theme
   Scoped to pages that opt in with <body class="rd">. Loaded after the
   legacy stylesheets so it can re-skin shared components (buttons, inputs,
   modals, dropdowns) without touching the marketing pages.

   Source of truth: the "Jules Web App" design handoff (tokens in its README).
   ========================================================================== */

body.rd {
    /* Color */
    --bg-body: #FBFAF9;
    --bg-card: #FFFFFF;
    --bg-subtle: #F8F6F4;
    --text-primary: #2C2825;
    --text-secondary: #736F6F;
    --text-tertiary: #878787;
    --accent-line: #E7E7E7;
    --hairline: rgba(71, 70, 69, 0.1);
    --chip-bg: #F3F3F3;
    --chip-bg-hover: #EBEBEB;
    --chip-ink: #6B6661;
    --success: #34A853;
    --warning: #FF9D00;
    --destructive: #FF0C18;

    /* Shape and elevation */
    --rd-input-shadow: inset 0 0 0 1px var(--hairline), 0 2px 2px -1px rgba(0, 0, 0, 0.04);
    --rd-card-shadow: inset 0 0 0 1px var(--hairline);
    --radius-xl: 24px;

    --rd-body-size: 16px;

    /* Shared motion: feedback, small surfaces, dialogs and temporary screens. */
    --rd-motion-feedback: 120ms;
    --rd-motion-menu: 160ms;
    --rd-motion-dialog: 200ms;
    --rd-motion-panel: 220ms;
    --rd-motion-screen: 260ms;
    --rd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Figma typography, with locally hosted heading and application fonts. */
    --font-serif: 'Faculty Glyphic', ui-serif, Georgia, serif;
    --font-sans: 'Open Runde', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    background-color: var(--bg-body);
    font-family: var(--font-sans);
    font-size: var(--rd-body-size);
    line-height: 1.4;
}

body.rd h1,
body.rd h2,
body.rd h3,
body.rd h4 {
    font-family: var(--font-serif);
    font-weight: 400;
}

/* Icon helper: a tintable icon rendered from the design's SVG set. */
.rd-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--rd-icon) center / contain no-repeat;
    mask: var(--rd-icon) center / contain no-repeat;
}

.rd-icon-home { --rd-icon: url('/apps/web/assets/redesign/home.svg'); }
.rd-icon-feedback { --rd-icon: url('/apps/web/assets/redesign/feedback.svg?v=figma-20261009'); }
.rd-icon-gear { --rd-icon: url('/apps/web/assets/redesign/gear.svg?v=figma-20261009'); }
.rd-icon-logout { --rd-icon: url('/apps/web/assets/redesign/logout.svg'); }
.rd-icon-clock { --rd-icon: url('/apps/web/assets/redesign/clock.svg'); }
.rd-icon-cal { --rd-icon: url('/apps/web/assets/redesign/cal.svg'); }
.rd-icon-close { --rd-icon: url('/apps/web/assets/redesign/close.svg'); }
.rd-icon-chevron { --rd-icon: url('/apps/web/assets/redesign/chevron-down.svg'); }
.rd-icon-arrow { --rd-icon: url('/apps/web/assets/redesign/arrow-right.svg'); }
.rd-icon-phone-in { --rd-icon: url('/apps/web/assets/redesign/phone-in.svg'); }
.rd-icon-phone-missed { --rd-icon: url('/apps/web/assets/redesign/phone-missed.svg'); }
.rd-icon-plus { --rd-icon: url('/apps/web/assets/redesign/plus.svg'); }

/* ==========================================================================
   Buttons
   ========================================================================== */

body.rd .btn {
    height: 44px;
    padding: 0 24px;
    font-family: var(--font-sans);
    font-size: var(--rd-body-size);
    font-weight: 600;
    letter-spacing: -0.016em;
    border-radius: 100px;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

body.rd .btn-primary {
    background-color: var(--text-primary);
    color: #FFF;
    box-shadow: none;
}

body.rd .btn-primary:hover {
    transform: none;
    box-shadow: none;
    background-color: #403A36;
}

body.rd .btn-secondary {
    background-color: var(--chip-bg);
    color: var(--chip-ink);
    border: none;
}

body.rd .btn-secondary:hover {
    background-color: var(--chip-bg-hover);
    border: none;
}

body.rd .btn-small {
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
}

body.rd .btn-back {
    height: 40px; margin-top: 0; padding: 0; border-radius: 100px; background: var(--chip-bg); color: var(--text-tertiary); font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}

body.rd .btn-back:hover {
    background: var(--chip-bg-hover);
    color: var(--text-secondary);
}

/* ==========================================================================
   Form controls
   ========================================================================== */

body.rd .form-group {
    margin-bottom: 16px;
}

body.rd .form-label {
    line-height: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

body.rd .form-input {
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #FFF;
    box-shadow: var(--rd-input-shadow);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

body.rd .form-input:focus {
    background: #FFF;
    box-shadow: inset 0 0 0 1px rgba(44, 40, 37, 0.45), 0 2px 2px -1px rgba(0, 0, 0, 0.04);
}

body.rd .form-input::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

body.rd .form-input[readonly]:not(.dropdown-trigger):not(#date):not([id$="-date"]) {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

body.rd .form-hint {
    line-height: 16px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Date and time fields: a boxed field with a small caption above the value
   and an icon on the right, as in the design. Applies to any form row that
   holds the calendar-popup date field (onboarding, add, edit). */
body.rd .form-row:has(.calendar-popup) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.rd .form-row:has(.calendar-popup) .form-group {
    position: relative;
    margin-bottom: 0;
}

body.rd .form-row:has(.calendar-popup) .form-label {
    position: absolute;
    top: 8px;
    left: 14px;
    z-index: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-tertiary);
    pointer-events: none;
}

body.rd .form-row:has(.calendar-popup) .form-input {
    height: 55px;
    padding: 22px 38px 6px 14px;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

body.rd .form-row:has(.calendar-popup) .calendar-popup .form-input {
    background-image: url('/apps/web/assets/redesign/cal.svg');
}

body.rd .form-row:has(.calendar-popup) .custom-dropdown .form-input {
    background-image: url('/apps/web/assets/redesign/clock.svg');
}

/* Custom dropdown menus */
body.rd .dropdown-menu {
    border: 1px solid var(--accent-line); border-radius: 8px; background: #FFF; box-shadow: 0 0 32px 8px rgba(0,0,0,.04); padding: 8px 4px; max-height: 180px; box-sizing: border-box; min-width: 0; width: 100%; left: 0; right: auto;
    scrollbar-width: none;
}

body.rd .dropdown-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }

body.rd .dropdown-option {
    min-height: 24px; padding: 4px 6px; margin-bottom: 4px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; line-height: 16px; font-weight: 400;
}

body.rd .dropdown-option:hover {
    background: var(--bg-subtle);
}

body.rd .dropdown-option.selected {
    background: #f7efe8; font-weight: 400;
}

/* Select-style dropdown triggers show a chevron */
body.rd .custom-dropdown > .dropdown-trigger[readonly] {
    background-image: url('/apps/web/assets/redesign/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    padding-right: 38px;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

body.rd .toast-container {
    width: min(360px, calc(100vw - 32px));
    align-items: stretch;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

body.rd .toast {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid rgba(44, 40, 37, 0.08);
    border-radius: 14px;
    background: #FFF;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(44, 40, 37, 0.04), 0 8px 24px rgba(44, 40, 37, 0.08);
    transform: translateY(6px) scale(0.98);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.rd .toast.visible { transform: translateY(0) scale(1); }
body.rd .toast-message { min-width: 0; overflow-wrap: anywhere; }
body.rd .toast svg { width: 16px; height: 16px; color: inherit; }
body.rd .toast-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--chip-bg);
    color: var(--text-secondary);
}
body.rd .toast.success .toast-status { background: #edf5ee; color: #26753d; }
body.rd .toast.error .toast-status { background: #fff0ef; color: #c83232; }
body.rd .toast-dismiss {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
body.rd .toast-dismiss::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
body.rd .toast-dismiss:hover { background: var(--chip-bg); color: var(--text-primary); }
body.rd .toast-dismiss:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

@media (max-width: 600px) {
    body.rd .toast-container { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    body.rd .toast { transform: none; transition: none; }
}

/* ==========================================================================
   Shared modal (light-DOM .modal and the <app-modal> shadow box)
   ========================================================================== */

body.rd .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
}

body.rd .modal {
    max-width: 360px;
    padding: 16px;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px var(--hairline);
}

body.rd .modal-header {
    margin-bottom: 16px;
}

body.rd .modal-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
}

body.rd app-modal {
    --font-serif: 'Faculty Glyphic', ui-serif, Georgia, serif;
}

body.rd app-modal::part(modal-box) {
    border-radius: 24px;
    padding: 16px;
    box-shadow: inset 0 0 0 1px var(--hairline);
    font-family: var(--font-sans);
}

/* ==========================================================================
   Auth pages (login, onboarding): centered 328px column, no card chrome
   ========================================================================== */

body.rd-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.rd-auth > .container,
body.rd-auth > app-footer,
body.rd-auth app-footer {
    display: none;
}

body.rd-auth .page-wrapper {
    flex: 1;
    min-height: 0;
    padding: 48px 24px;
    align-items: center;
}

body.rd-auth .content-card {
    max-width: 328px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.rd-auth .reveal,
body.rd-auth .reveal.visible {
    transition: none;
    transform: none;
}

/* Brand lockup */
.rd-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.rd-brand img.rd-brand-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
}

.rd-brand img.rd-brand-word {
    width: 48px;
    height: 21px;
    display: block;
}

.rd-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

/* Auth titles */
body.rd-auth .login-title,
body.rd-auth .step-title {
    margin-bottom: 4px; font-family: var(--font-serif); font-size: 20px; line-height: 24px; text-align: center; color: var(--text-primary);
}

body.rd-auth .login-subtitle,
body.rd-auth .step-subtitle {
    margin-bottom: 24px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 17px; text-align: center; color: var(--text-secondary);
}

body.rd-auth .login-title + .login-subtitle {
    font-family: Inter, var(--font-sans); font-size: 14px; line-height: 16px;
}


body.rd-auth .step-header {
    margin-bottom: 0;
}

/* Google button */
body.rd google-btn {
    display: flex;
    justify-content: center;
}

body.rd .google-btn {
    width: 191px; height: 42px; padding: 0 11px; gap: 4px; border: 1px solid #ebe5de; border-radius: 100px; background: #FFF; box-shadow: none; font-family: Inter, var(--font-sans); font-size: 14px; font-weight: 500; line-height: 16px; color: var(--text-primary); transform: none;
}

body.rd .google-btn:hover {
    border: none;
    transform: none;
    background: var(--bg-subtle);
}

/* "or" divider */
body.rd .divider {
    margin: 24px 0;
    line-height: 17px;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--text-secondary);
}

body.rd .divider::before,
body.rd .divider::after {
    background: var(--accent-line);
}

/* Login form */
body.rd-auth #login-form .form-group {
    margin-bottom: 8px;
}

body.rd-auth #login-form .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.rd-auth #login-form .form-input {
    height: 40px; padding: 0 14px; border-radius: 8px; font-family: Inter, var(--font-sans); font-size: 14px; line-height: 16px;
}

/* Sign-up prompt card */
body.rd-auth .card-footer {
    margin-top: 24px; padding: 13px 0 0; border: none; border-top: 1px solid #ebe5de; border-radius: 0; background: transparent; box-shadow: none; text-align: center; font-size: 14px; font-weight: 400; color: var(--text-secondary);
}

body.rd-auth .card-footer p:first-child {
    margin-bottom: 12px !important; line-height: 20.8px;
}

body.rd-auth .card-footer a {
    color: var(--text-primary);
}

body.rd-auth .card-footer #signup-link {
    font-weight: 500; text-decoration: underline !important;
}

body.rd-auth .card-footer p:last-child {
    line-height: 20.8px; font-size: 12px; color: var(--text-tertiary);
}

body.rd-auth .card-footer p:last-child a {
    color: inherit;
}

body.rd-auth #welcome-banner {
    border: none;
    border-radius: 12px;
    background: #FFF;
    box-shadow: var(--rd-card-shadow);
}

body.rd-auth .success-icon {
    background: #FFF;
    box-shadow: var(--rd-card-shadow);
}

body.rd-auth .callback-spinner {
    border-width: 3px;
}

/* Onboarding: top bar with a progress line instead of step dots */
.rd-topbar {
    position: relative;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--accent-line);
}

.rd-topbar .rd-brand-word {
    width: 40px;
    height: 18px;
}

.rd-topbar-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 33.333%;
    background: var(--text-primary);
    transition: width 260ms ease;
}

body.rd-auth:has(.step-dot[data-step="2"].active) .rd-topbar-progress,
body.rd-auth:has(.step-dot[data-step="2"].completed):not(:has(.step-dot[data-step="2a"].active)) .rd-topbar-progress {
    width: 66.666%;
}

body.rd-auth:has(.step-dot[data-step="2a"].active) .rd-topbar-progress {
    width: 100%;
}

body.rd-auth .step-indicator {
    display: none;
}

body.rd-auth .step-content > .form-group:first-of-type {
    margin-top: 24px;
}

body.rd-auth .step-content .form-group {
    margin-bottom: 16px;
}

body.rd-auth .step-content > .form-row {
    margin-bottom: 8px;
}

body.rd-auth .step-content > p {
    margin-top: 8px;
}

body.rd-auth .step-content .btn {
    width: 100%;
}

body.rd-auth .step-content .btn-primary {
    margin-top: 8px !important;
    margin-bottom: 8px;
}

body.rd-auth .step-content .btn-back {
    width: 100%;
    margin-top: 0;
}

/* OTP boxes */
body.rd-auth .verification-input-group {
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}

body.rd-auth .verification-digit {
    width: 60px; height: 40px; padding: 0 14px; border: none; border-radius: 8px; background: #FFF; box-shadow: var(--rd-input-shadow); text-align: left; font-family: Inter, var(--font-sans); font-size: 14px; font-weight: 500;
}

body.rd-auth .verification-digit:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(44, 40, 37, 0.45), 0 2px 2px -1px rgba(0, 0, 0, 0.04);
}

body.rd-auth .resend-section,
body.rd-auth .resend-timer {
    font-size: 12px; font-weight: 400; color: var(--text-secondary);
}

body.rd-auth .resend-section {
    margin-bottom: 24px; text-align: center;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 600px) {
    body.rd-auth .page-wrapper {
        padding: 32px 24px;
        align-items: flex-start;
    }

    body.rd .form-row:has(.calendar-popup) {
        grid-template-columns: 1fr 1fr;
    }
}

/* Utilities */
body.rd .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.rd .rd-when-label {
    margin: 8px 0;
    line-height: 19px;
    font-size: var(--rd-body-size);
    font-weight: 500;
    color: var(--text-primary);
}

/* ==========================================================================
   Account connection pages (ChatGPT connect, Google Calendar callback)
   ========================================================================== */

body.rd-auth .connect-card {
    max-width: 400px;
}

body.rd-auth .connect-title {
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 1.15;
    text-align: center;
}

body.rd-auth .connect-subtitle {
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: var(--text-secondary);
}

body.rd-auth .connect-status {
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

body.rd-auth .connect-meta {
    padding: 16px;
    border: none;
    border-radius: 24px;
    background: #FFF;
    box-shadow: var(--rd-card-shadow);
}

body.rd-auth .connect-meta-row {
    font-size: 14px;
    font-weight: 500;
}

body.rd-auth .connect-copy {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

body.rd-auth .connect-actions .btn {
    min-width: 0;
    height: 40px;
    font-size: 14px;
}

body.calendar-connection-page.rd .connection-header {
    display: flex;
    justify-content: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--accent-line);
}

body.calendar-connection-page.rd .connection-wordmark {
    min-height: 0;
}

body.calendar-connection-page.rd .connection-panel {
    max-width: 400px;
    padding: 24px 16px;
    border-radius: 24px;
    box-shadow: var(--rd-card-shadow);
}

body.calendar-connection-page.rd .connection-icon {
    border-radius: 100px;
    background: var(--bg-subtle);
}

body.calendar-connection-page.rd .connection-panel h1 {
    font-family: var(--font-serif);
    font-size: 24px;
    letter-spacing: 0;
}

body.calendar-connection-page.rd .connection-panel p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

body.calendar-connection-page.rd .connection-retry {
    height: 40px;
    border: none;
    border-radius: 100px;
    background: var(--text-primary);
    color: #FFF;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
}

body.calendar-connection-page.rd .connection-return {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}



body.rd-auth .btn-primary { height: 40px; font-size: 14px; line-height: 16px; }
body.rd-auth .rd-auth-brand { margin-bottom: 12px; }
body.rd-auth .rd-auth-brand .rd-brand-mark { width: 48px; height: 48px; }
.rd-auth-word { font-family: 'Libertinus Serif', Georgia, serif; font-size: 32px; line-height: 36px; }
body.rd-auth .divider { line-height: 21px; }
body.rd-auth:has(.rd-topbar) .page-wrapper { align-items: flex-start; padding-top: max(32px, calc(50vh - 280.5px)); }
.rd-topbar .rd-brand { gap: 6.67px; }
.rd-topbar .rd-brand-mark { width: 32px; height: 32px; }
.rd-topbar .rd-brand-word { width: 42px; height: 18.56px; }
body.rd-auth .step-content > .form-group:first-of-type { margin-top: 24px; }
body.rd-auth .step-content[data-step="1"] > .form-group { margin-bottom: 24px; }
body.rd-auth .step-content[data-step="1"] .btn-primary { margin-top: 24px !important; }
body.rd-auth .step-content[data-step="2"] > .form-group { margin-bottom: 12px; }
body.rd-auth .step-content[data-step="2"] > .form-group > .form-label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
body.rd-auth .step-content[data-step="2"] .form-hint { font-size: 12px; line-height: 15px; }
body.rd-auth .step-content[data-step="2"] .btn-primary { margin-top: 12px !important; }
body.rd-auth .step-content .form-input { font-family: Inter, var(--font-sans); }
body.rd-auth .verification-input-group { margin: 24px 0; }
body.rd-auth .step-content[data-step="2a"] .btn-primary { margin: 0 0 8px !important; }
body.rd-auth:has(#sent-state.active) .rd-auth-brand { display: none; }
body.rd-auth:has(#sent-state.active) .content-card { transform: translateY(-64px); }
body.rd-auth #sent-state .success-icon { width: 52.364px; height: 48px; margin: 0 auto 12px; background: transparent; box-shadow: none; border-radius: 0; }
body.rd-auth #sent-state .success-icon img { display: block; }
body.rd-auth #sent-state .login-subtitle { margin-bottom: 24px; }
.sent-footer { border-top: 1px solid #ebe5de; padding-top: 13px; font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.sent-footer .resend-link { font-family: var(--font-sans); font-size: 14px; text-decoration: underline; }
.sent-back { display: block; margin: 12px auto 0; font-size: 12px; }
body.rd .dropdown-option:last-child { margin-bottom: 0; }
body.rd app-modal::part(overlay) { background: rgba(0,0,0,.6); backdrop-filter: none; }
body.rd .vanilla-calendar { width: 304px; min-width: 304px; min-height: 316px; padding: 12px 12px 20px !important; border-radius: 8px !important; box-shadow: 0 0 32px 8px rgba(0,0,0,.04) !important; }
body.rd .vanilla-calendar-header { margin-bottom: 12px !important; opacity: .5; }
body.rd .vanilla-calendar-month, body.rd .vanilla-calendar-year { font-family: var(--font-sans); font-size: 16px !important; font-weight: 500; }
body.rd .vanilla-calendar-week__day { height: 40px; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -.14px !important; }
body.rd .vanilla-calendar-day__btn { height: 32px; font-family: var(--font-sans); font-size: 14px; font-weight: 500 !important; }
@media (max-width: 600px) {
    body.rd-auth:has(.rd-topbar) .page-wrapper { padding-top: 32px; }
    body.rd-auth:has(#sent-state.active) .content-card { transform: none; }
}

body.rd .google-btn .btn-text { white-space: nowrap; letter-spacing: -.2px; }
body.rd .google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.rd-sidebar-word { font-family: 'Libertinus Serif', Georgia, serif; font-size: 16px; line-height: 18px; }
.rd-topbar img.rd-brand-mark { width: 32px; height: 32px; }
.rd-topbar img.rd-brand-word { width: 42px; height: 18.56px; }

/* Mobile body copy scales independently of headings and smaller UI labels. */
@media (max-width: 600px) {
    body.rd { --rd-body-size: 15px; }

    body.rd .btn,
    body.rd .google-btn,
    body.rd-auth .btn-primary,
    body.rd-auth .connect-actions .btn,
    body.calendar-connection-page.rd .connection-retry {
        position: relative;
        height: 36px;
        min-height: 36px;
        padding-inline: 16px;
    }

    body.rd .btn::after,
    body.rd .google-btn::after,
    body.calendar-connection-page.rd .connection-retry::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        min-width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
}

/* Quiet, interruptible interaction feedback. Geometry stays fixed. */
body.rd .btn {
    transition: background-color var(--rd-motion-feedback) ease, color var(--rd-motion-feedback) ease,
        opacity var(--rd-motion-feedback) ease, scale var(--rd-motion-feedback) var(--rd-ease-out);
}
body.rd .btn:active:not(:disabled) { scale: 0.96; transition-duration: 0ms; }
body.rd .btn:disabled { scale: 1; }
body.rd .dropdown-menu {
    pointer-events: none;
    transform-origin: top left;
    transform: translateY(-3px) scale(0.98);
    transition: opacity var(--rd-motion-menu) var(--rd-ease-out),
        transform var(--rd-motion-menu) var(--rd-ease-out), visibility 0s linear var(--rd-motion-menu);
}
body.rd .custom-dropdown.open .dropdown-menu,
body.rd .dropdown-menu.visible {
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}
body.rd .dropdown-option { transition: none; }
body.rd .calendar-container {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top left;
    transform: translateY(-3px) scale(0.98);
    transition: opacity var(--rd-motion-menu) var(--rd-ease-out),
        transform var(--rd-motion-menu) var(--rd-ease-out), visibility 0s linear var(--rd-motion-menu);
}
body.rd .calendar-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}
body.rd .vanilla-calendar-day__btn { transition: none !important; }
body.rd .modal-overlay,
body.rd app-modal::part(overlay) {
    pointer-events: none;
    transition: opacity var(--rd-motion-dialog) var(--rd-ease-out),
        visibility 0s linear var(--rd-motion-dialog);
}
body.rd .modal-overlay.visible,
body.rd app-modal[data-open]::part(overlay) {
    pointer-events: auto;
    transition-delay: 0s;
}
body.rd .modal,
body.rd app-modal::part(modal-box) {
    transition: transform var(--rd-motion-dialog) var(--rd-ease-out);
}
body.rd .toast { transition: opacity var(--rd-motion-dialog) ease, transform var(--rd-motion-dialog) var(--rd-ease-out); }
body.rd .toast.is-closing { pointer-events: none; transform: translateY(3px) scale(0.98); }
@media (prefers-reduced-motion: reduce) {
    body.rd { --rd-motion-feedback: 0ms; --rd-motion-menu: 0ms; --rd-motion-dialog: 0ms; --rd-motion-panel: 0ms; --rd-motion-screen: 0ms; }
    body.rd .btn:active:not(:disabled) { scale: 1; }
    body.rd .dropdown-menu, body.rd .calendar-container, body.rd .toast,
    body.rd .toast.is-closing, body.rd .modal, body.rd app-modal::part(modal-box) { transform: none; transition: none; }
    body.rd .modal-overlay, body.rd app-modal::part(overlay) { transition: none; }
}

/* Mobile CTA labels stay readable without enlarging compact controls. */
@media (max-width: 600px) {
    body.rd .btn, body.rd .btn .btn-text, body.rd .google-btn,
    body.rd .chip-btn, body.rd .section-action, body.rd .sent-back,
    body.rd .connection-retry, body.rd .connection-return { font-size: 14px !important; }
}