/* Shared interaction rules for planner, account, and public pages. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 0; }
:where(button, a, input, select, textarea, summary) { scroll-margin-block: 24px; }
:is(input, textarea, select)[aria-invalid="true"] { border-color: #ff9a9a; }
.field-error { display: block; margin: 6px 0 0; color: #ff9a9a; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.field-error:empty { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
img, video, canvas { max-width: 100%; height: auto; }
button, a, summary { touch-action: manipulation; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
:where(button):disabled { opacity: .55; }
:where(button)[aria-busy="true"], form[aria-busy="true"] button[type="submit"] { cursor: wait; }
input::placeholder, textarea::placeholder { color: #91919a; opacity: 1; }
:where(.public-brand, .brand, .auth-links a, .secondary-link, .footer-links a) { min-height: 44px; display: inline-flex; align-items: center; }
.auth-card { background-image: radial-gradient(ellipse at top right, rgba(190,156,243,.055), transparent 65%); }
:where(.page-header, .info-hero, .legal-heading) .eyebrow { color: #a3a3ad; }
.auth-intro .eyebrow, .feature-section .eyebrow, .steps-section .eyebrow, .faq-section .eyebrow, .split-section .eyebrow, .guide-grid .eyebrow, .hero-note { color: #a3a3ad; }
.info-hero h1, .legal-heading h1, .auth-intro h1 { overflow-wrap: anywhere; }
.feature-card, .guide-grid article { transition: border-color 180ms ease, background-color 180ms ease; }
@media (hover: hover) {
    .feature-card:hover, .guide-grid article:hover { border-color: #52465f; background-color: #141019; }
}
@media (max-width: 800px) {
    .card-actions .icon-action { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Preserve native-control workarounds consistently across both themes. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea {
    -webkit-appearance: none;
    appearance: none;
}
select:not([multiple]) {
    appearance: none;
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaaab3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}
.google-mark { width: 20px; height: 20px; display: block; flex: 0 0 20px; object-fit: contain; }

/* Both color pickers retain their page-specific mobile sizes. */
.task-color-swatch, .calendar-color-swatch {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    outline: 0;
    background: var(--swatch-color);
    background-clip: padding-box;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.task-color-swatch:hover, .calendar-color-swatch:hover { transform: scale(1.08); }
.task-color-swatch[aria-checked="true"], .calendar-color-swatch[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.32); }