/* Shared interaction and accessibility foundations for every web surface. */
:root {
    --apple-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --apple-surface: #fbfaf8;
    --apple-ink: #2c2a29;
    --apple-focus: #35678f;
}
body.dark-mode {
    --apple-surface: #242321;
    --apple-ink: #f6f4f1;
    --apple-focus: #a8d5ff;
}
html { font-size: 100%; scroll-padding-top: 6rem; }
body, body h1, body h2, body h3, body h4, body #page-title,
body .month-name, body .nav-brand, body .section-title,
body .detail-modal-title, body .profile-section-title,
body .template-preview-title, body .view-context-title {
    font-family: var(--apple-font);
    font-optical-sizing: auto;
}
body { -webkit-text-size-adjust: 100%; }
h1, h2, h3, .section-title { letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
button, input, select, textarea { font-family: inherit; }
button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .btn, .nav-links a, .year-switch-btn, .settings-tab,
.edit-toggle, .compare-toggle, .action-button, .settings-button,
.undo-action-btn, .undo-chevron-btn, .current-user-display {
    min-height: 2.75rem;
}
.year-switch-btn, .settings-button, .undo-chevron-btn { min-width: 2.75rem; }
button:active:not(:disabled), .btn:active, .nav-links a:active {
    opacity: .72;
    transition: opacity 80ms ease-out;
}
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--apple-focus);
    outline-offset: 3px;
}
input, select, textarea { scroll-margin-block: 6rem; }
.nav, .button-bar, .legend {
    background: color-mix(in srgb, var(--apple-surface) 85%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}
.nav { border-bottom: 0; box-shadow: 0 4px 18px rgb(44 42 41 / 5%); }
.button-bar-container { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.hero::before, .hero::after { animation: none; }
.year-balance-caption { letter-spacing: .06em; color: var(--ci-ink-soft); }
.calendar-grid .weekdays, .calendar-grid .week-label { color: var(--ci-ink-soft); }
.calendar-grid .weekdays span:first-child,
.calendar-grid .weekdays span:nth-child(7),
.calendar-grid .weekdays span:nth-child(8),
body:not(.dark-mode) .calendar-grid .week-label { color: var(--ci-ink-soft); }
@media (hover: none) {
    .calendar-grid .day:hover:not(.empty), .feature-card:hover, .pricing-card:hover {
        transform: none;
    }
}
@media (max-width: 600px) {
    input, select, textarea { font-size: max(1rem, 16px); }
    .nav-inner { padding-inline: 1rem; gap: .75rem; flex-wrap: wrap; }
    .nav-links { flex-wrap: wrap; }
    .button-bar { max-width: 100%; }
    .page-hero-top, .year-balance-legend { flex-wrap: wrap; }
    .modal, .detail-modal, .settings-modal-inner {
        max-height: calc(100dvh - env(safe-area-inset-top) - 1rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
@media (prefers-reduced-transparency: reduce) {
    body .nav, body .page-hero, body .button-bar, body .legend,
    body .modal, body .chat-modal, body .detail-modal, body .settings-modal-inner,
    body .view-context, body .back-to-landing-btn {
        background: var(--apple-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    body { --ci-ink-soft: var(--apple-ink); --ci-ink-muted: var(--apple-ink); }
    body .nav, body .page-hero, body .button-bar, body .legend,
    body .modal, body .detail-modal, body .settings-modal-inner {
        background: var(--apple-surface);
        border: 1px solid var(--apple-ink);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    button, input, select, textarea { border: 1px solid currentColor; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}