/* Load after component styles. Palette tokens replace surfaces, not a filter. */
[data-theme] {
  color-scheme: light;
  --paper: #f8f8f3;
  --surface: #fffefa;
  --surface-alt: #f0f2e9;
  --surface-raised: #ffffff;
  --ink: #273d33;
  --muted: #586957;
  --line: #d7decf;
  --grid-line: #e3e8dc;
  --forest: #2d543f;
  --action-hover: #1d3f2d;
  --on-action: #ffffff;
  --sage: #dfe7d5;
  --sage-ink: #294b32;
  --focus: #527542;
  --accent: #b38c65;
  --danger: #943e2c;
  --danger-surface: #f9e8e1;
  --warning: #7e5724;
  --warning-surface: #f4ead3;
  --success: #33633a;
  --success-surface: #e2efde;
  --event-warm: #f3e9dd;
  --event-cool: #e0e9eb;
  --event-neutral: #ece6db;
  --event-ink: #273d33;
  --shadow: #1c342018;
  --backdrop: #17241bb0;
  color: var(--ink);
  background: var(--paper);
}
[data-theme][data-color="ocean"] {
  --forest: #245c70;
  --action-hover: #174556;
  --sage: #dcecf0;
  --sage-ink: #234d5d;
  --focus: #25677c;
  --accent: #668c98;
}
[data-theme][data-color="terracotta"] {
  --forest: #934d33;
  --action-hover: #773b26;
  --sage: #f2e3d8;
  --sage-ink: #783b27;
  --focus: #945438;
  --accent: #b1744e;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111b18;
  --surface: #192821;
  --surface-alt: #21342b;
  --surface-raised: #263c31;
  --ink: #edf3e7;
  --muted: #b5c1b2;
  --line: #43584a;
  --grid-line: #35493d;
  --forest: #9ccaad;
  --action-hover: #b2dec1;
  --on-action: #152b1c;
  --sage: #2b4934;
  --sage-ink: #ddf0dc;
  --focus: #b3dec1;
  --accent: #d0b08b;
  --danger: #ffb7a4;
  --danger-surface: #4d2d27;
  --warning: #ecd19b;
  --warning-surface: #453d29;
  --success: #b0dcac;
  --success-surface: #2a4430;
  --event-warm: #503a2e;
  --event-cool: #29444b;
  --event-neutral: #413d2d;
  --event-ink: #f3eee3;
  --shadow: #00000040;
  --backdrop: #050b08b8;
}
[data-theme="dark"][data-color="ocean"] {
  --paper: #101b20;
  --surface: #182a32;
  --surface-alt: #213640;
  --surface-raised: #2a424d;
  --ink: #edf5f7;
  --muted: #afc3cd;
  --line: #3d5662;
  --grid-line: #324c58;
  --forest: #99d0e4;
  --action-hover: #b8e4f2;
  --on-action: #142c37;
  --sage: #1f414c;
  --sage-ink: #d3eff7;
  --focus: #a3d9ed;
  --accent: #94b7c5;
}
[data-theme="dark"][data-color="terracotta"] {
  --paper: #211815;
  --surface: #30231e;
  --surface-alt: #3a2b25;
  --surface-raised: #47332a;
  --ink: #fff0e8;
  --muted: #cfb7a9;
  --line: #654b3f;
  --grid-line: #513d33;
  --forest: #ebb293;
  --action-hover: #f6c6a9;
  --on-action: #371e14;
  --sage: #50352a;
  --sage-ink: #ffddc6;
  --focus: #efbea2;
  --accent: #dfa17b;
}

[data-theme][data-color="plum"] {
  --paper: #f9f5fa;
  --surface: #fffaff;
  --surface-alt: #f9f5fa;
  --ink: #352838;
  --muted: #69576d;
  --line: #ddd0df;
  --grid-line: #ddd0df;
  --forest: #704575;
  --action-hover: #543259;
  --sage: #ede0ee;
  --sage-ink: #704575;
  --focus: #704575;
  --accent: #704575;
}
[data-theme="dark"][data-color="plum"] {
  --paper: #201722;
  --surface: #2e2332;
  --surface-alt: #3a2d40;
  --surface-raised: #4b3951;
  --ink: #f5edf7;
  --muted: #c9b6ce;
  --line: #604d67;
  --grid-line: #3a2d40;
  --forest: #dec0e4;
  --action-hover: #f5edf7;
  --on-action: #201722;
  --sage: #4b3951;
  --sage-ink: #f5edf7;
  --focus: #dec0e4;
  --accent: #dec0e4;
}
.settings-swatch[data-palette="plum"] { background: #704575; }
[data-theme][data-color="rose"] {
  --paper: #fcf5f7;
  --surface: #fffafb;
  --surface-alt: #fcf5f7;
  --ink: #412a32;
  --muted: #795c67;
  --line: #e7cfd7;
  --grid-line: #e7cfd7;
  --forest: #94465d;
  --action-hover: #743248;
  --sage: #f4dfe6;
  --sage-ink: #94465d;
  --focus: #94465d;
  --accent: #94465d;
}
[data-theme="dark"][data-color="rose"] {
  --paper: #25171d;
  --surface: #35232b;
  --surface-alt: #432d37;
  --surface-raised: #553a45;
  --ink: #fff0f5;
  --muted: #d5b6c2;
  --line: #704d5c;
  --grid-line: #432d37;
  --forest: #efb4c8;
  --action-hover: #fff0f5;
  --on-action: #25171d;
  --sage: #553a45;
  --sage-ink: #fff0f5;
  --focus: #efb4c8;
  --accent: #efb4c8;
}
.settings-swatch[data-palette="rose"] { background: #94465d; }
[data-theme][data-color="amber"] {
  --paper: #fbf8ef;
  --surface: #fffdf5;
  --surface-alt: #fbf8ef;
  --ink: #3d3320;
  --muted: #756443;
  --line: #e3d7b9;
  --grid-line: #e3d7b9;
  --forest: #815b13;
  --action-hover: #63430b;
  --sage: #f4e5bf;
  --sage-ink: #815b13;
  --focus: #815b13;
  --accent: #815b13;
}
[data-theme="dark"][data-color="amber"] {
  --paper: #211c12;
  --surface: #2e281b;
  --surface-alt: #3c3423;
  --surface-raised: #4c422b;
  --ink: #fbf3df;
  --muted: #cec1a2;
  --line: #665a3b;
  --grid-line: #3c3423;
  --forest: #e8ca83;
  --action-hover: #fbf3df;
  --on-action: #211c12;
  --sage: #4c422b;
  --sage-ink: #fbf3df;
  --focus: #e8ca83;
  --accent: #e8ca83;
}
.settings-swatch[data-palette="amber"] { background: #815b13; }
[data-theme][data-color="teal"] {
  --paper: #f1f8f6;
  --surface: #fafffd;
  --surface-alt: #f1f8f6;
  --ink: #203c39;
  --muted: #506d68;
  --line: #c8ded8;
  --grid-line: #c8ded8;
  --forest: #176968;
  --action-hover: #10504f;
  --sage: #d7ece8;
  --sage-ink: #176968;
  --focus: #176968;
  --accent: #176968;
}
[data-theme="dark"][data-color="teal"] {
  --paper: #101e1c;
  --surface: #192d29;
  --surface-alt: #223c37;
  --surface-raised: #2d4b44;
  --ink: #e9f8f3;
  --muted: #abc9c1;
  --line: #3e635a;
  --grid-line: #223c37;
  --forest: #8ed5cb;
  --action-hover: #e9f8f3;
  --on-action: #101e1c;
  --sage: #2d4b44;
  --sage-ink: #e9f8f3;
  --focus: #8ed5cb;
  --accent: #8ed5cb;
}
.settings-swatch[data-palette="teal"] { background: #176968; }
[data-theme][data-color="slate"] {
  --paper: #f4f6f9;
  --surface: #fbfcff;
  --surface-alt: #f4f6f9;
  --ink: #283446;
  --muted: #5e6c80;
  --line: #d0d9e5;
  --grid-line: #d0d9e5;
  --forest: #465b76;
  --action-hover: #30435b;
  --sage: #dfe6ef;
  --sage-ink: #465b76;
  --focus: #465b76;
  --accent: #465b76;
}
[data-theme="dark"][data-color="slate"] {
  --paper: #171c24;
  --surface: #222a36;
  --surface-alt: #2d3746;
  --surface-raised: #39465a;
  --ink: #eef3fa;
  --muted: #b9c5d6;
  --line: #53637a;
  --grid-line: #2d3746;
  --forest: #b9cce5;
  --action-hover: #eef3fa;
  --on-action: #171c24;
  --sage: #39465a;
  --sage-ink: #eef3fa;
  --focus: #b9cce5;
  --accent: #b9cce5;
}
.settings-swatch[data-palette="slate"] { background: #465b76; }
[data-theme][data-color="espresso"] {
  --paper: #f8f5f1;
  --surface: #fffcf8;
  --surface-alt: #f8f5f1;
  --ink: #362d26;
  --muted: #726458;
  --line: #dfd4c8;
  --grid-line: #dfd4c8;
  --forest: #685044;
  --action-hover: #4f3b31;
  --sage: #ebe0d6;
  --sage-ink: #685044;
  --focus: #685044;
  --accent: #685044;
}
[data-theme="dark"][data-color="espresso"] {
  --paper: #201a16;
  --surface: #2e2620;
  --surface-alt: #3b3028;
  --surface-raised: #4c3d31;
  --ink: #f7eee5;
  --muted: #cbbcae;
  --line: #665343;
  --grid-line: #3b3028;
  --forest: #d9bea8;
  --action-hover: #f7eee5;
  --on-action: #201a16;
  --sage: #4c3d31;
  --sage-ink: #f7eee5;
  --focus: #d9bea8;
  --accent: #d9bea8;
}
.settings-swatch[data-palette="espresso"] { background: #685044; }

[data-theme] body { color: var(--ink); background: var(--paper); }
[data-theme] :is(button, input, select, textarea) {
  color: var(--ink);
  border-color: var(--line);
  background-color: var(--surface);
}
[data-theme] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
[data-theme] input { accent-color: var(--forest); }
[data-theme] button:hover:not(:disabled) { background-color: var(--surface-alt); }
[data-theme] button.primary {
  color: var(--on-action);
  border-color: var(--forest);
  background: var(--forest);
}
[data-theme] button.primary:hover:not(:disabled) { background: var(--action-hover); }
[data-theme] :is(button, input, select, textarea, a, summary, [tabindex]):focus-visible {
  outline-color: var(--focus);
}
[data-theme] :is(.panel, .calendar-shell, .request-card, .plan-summary, .poll-option,
  .friend-card, .invitee-dropdown, .link-card, .availability-calendar, .availability-dayheads,
  .availability-axis, dialog, .time-options, .guest-invitation-card) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme] :is(dialog, .time-options, .invitee-dropdown) { box-shadow: 0 16px 48px var(--shadow); }
[data-theme] dialog::backdrop { background: var(--backdrop); }
[data-theme] :is(.sidebar, .plans-tabs, .segmented, .close, .availability-controls,
  .availability-choice, .provider-logo, .facts span) {
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme] :is(.nav-item, .plans-tabs button, .segmented button, .settings-button,
  .text-button, .day-label, .time-options button, .visibility-help-button) { background: transparent; }
[data-theme] :is(.nav-item.active, .selected, .settings-button.active,
  .settings-button[aria-current="page"], .time-options button[aria-selected="true"],
  .plans-tabs button[aria-pressed="true"], .plans-tabs button[aria-selected="true"],
  .plans-tabs button.active, .plans-tabs button.selected, .invitee-option.is-active,
  .invitee-option:hover, .invitee-chip, .avatar, .friend-avatar, .pill, .plan-status) {
  background: var(--sage);
  color: var(--sage-ink);
  border-color: var(--line);
}
[data-theme] :is(.nav-item b, .plans-tabs button > span) { background: var(--surface-raised); color: var(--ink); }
[data-theme] :is(.brand-flower, .plant, .large-mark, .arrow, .eyebrow) { color: var(--forest); }
[data-theme] .brand-dot { color: var(--accent); }
[data-theme] :is(.sidebar-caption, .sidebar-note p, .account small, .subtitle,
  .muted, .topbar > div, footer, .legend, .timezone, .day-label span, .time-axis span,
  .card-kicker small, .request-card p, blockquote, .request-intro p, .mini-legend,
  .provider-card p, .connection-notes p, .profile-card p, .facts,
  .section-title span, .link-card small, .empty, .poll-option > p,
  .availability-item small, .guest-list > div > span:last-child, .plan-meta,
  .friends-local-note, .friend-handle, .friend-status, .friends-empty, .invitee-empty,
  .invitee-help, .invitee-chip-contact, .time-chevron, .availability-subtitle,
  .availability-controls p, .availability-key small, .availability-dayheads span,
  .availability-axis > span, .availability-choice p, .availability-scope) { color: var(--muted); }
[data-theme] .link-open-status { color: var(--forest) !important; }
[data-theme] :is(.notice, .composer-mode, .visibility-help-panel, .votes span) {
  color: var(--sage-ink);
  background: var(--sage);
  border-color: var(--line);
}
[data-theme] #composer-poll-fields { background: var(--surface-alt); }
[data-theme] :is(.time-trigger, .friends-search, .invitee-input, .invitee-manual-input) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
[data-theme] .time-trigger[aria-expanded="true"],
[data-theme] .time-options button:is(:hover, :focus, .is-active) {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--focus);
  outline-color: var(--focus);
}
[data-theme] .time-options button[aria-selected="true"]::after { color: var(--forest); }
[data-theme] .visibility-help-button > span { color: var(--sage-ink); background: var(--sage); border-color: var(--line); }
[data-theme] .visibility-help-button:is(:hover, [aria-expanded="true"]) > span { background: var(--surface-raised); }
[data-theme] .visibility-help-panel .visibility-help-note { border-color: var(--line); }
[data-theme] .request-intro { background: radial-gradient(ellipse, var(--sage), transparent 70%); }
[data-theme] :is(.calendar-scroll, .availability-scroll, .time-options, .visibility-help-panel) { scrollbar-color: var(--line) transparent; }
[data-theme] :is(.day-column, .availability-column) {
  border-color: var(--line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--grid-line) 63px, var(--grid-line) 64px);
}
[data-theme] .today-column { background-color: var(--surface-alt); }
[data-theme] :is(.day-label.today strong, .availability-dayheads .is-today strong) { color: var(--on-action); background: var(--forest); }
[data-theme] .event { color: var(--sage-ink); background: var(--sage); border-color: var(--forest); }
[data-theme] .event.color-1 { color: var(--event-ink); background: var(--event-warm); border-color: var(--accent); }
[data-theme] .event.color-2 { color: var(--event-ink); background: var(--event-cool); border-color: var(--line); }
[data-theme] .event.color-3 { color: var(--event-ink); background: var(--event-neutral); border-color: var(--accent); }
[data-theme] .event.personal {
  color: var(--ink);
  background: repeating-linear-gradient(135deg, var(--surface-alt) 0, var(--surface-alt) 5px, var(--surface-raised) 5px, var(--surface-raised) 6px);
  border-color: var(--line);
}
[data-theme] .event.tentative { border-color: var(--accent) !important; }
[data-theme] .event.proposed { color: var(--warning); background: var(--warning-surface); border-color: var(--warning); }
[data-theme] #content :is(.calendar-draft-selection, .event-drag-ghost) { color: var(--sage-ink); background: var(--sage); border-color: var(--forest); }
[data-theme] :is(.solid, .fit-dot) { background: var(--success); }
[data-theme] .dotted { border-color: var(--forest); }
[data-theme] .secret { background: repeating-linear-gradient(135deg, var(--muted) 0, var(--muted) 1px, transparent 1px, transparent 3px); }
[data-theme] :is(.slot-free, .availability-selection) { color: var(--success); background: var(--success-surface); border-color: var(--success); }
[data-theme] :is(.slot-busy, .selection-busy, .availability-commitment, .busy-dot) { color: var(--danger); background: var(--danger-surface); border-color: var(--danger); }
[data-theme] :is(.slot-tentative, .selection-tentative, .commitment-tentative, .maybe-dot) { color: var(--warning); background: var(--warning-surface); border-color: var(--warning); }
[data-theme] .availability-slot:is(:hover, :focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
[data-theme] .availability-slot span { color: inherit; }
[data-theme] :is(.availability-commitment strong, .availability-commitment small) { color: inherit; }
[data-theme] :is(.out-of-bounds, .availability-slot:disabled) { background: var(--surface-alt); }
[data-theme] .status-free { color: var(--success); }
[data-theme] :is(.danger, .status-busy, .form-error, .invitee-manual-error) { color: var(--danger); }
[data-theme] .status-tentative { color: var(--warning); }
[data-theme] .invitee-manual [aria-invalid="true"] { border-color: var(--danger); }
[data-theme] #toast { color: var(--on-action); background: var(--forest); }

[data-theme] .invitation-page {
  --invitation-paper: var(--paper);
  --invitation-ink: var(--ink);
  --invitation-forest: var(--forest);
  --invitation-line: var(--line);
  background: radial-gradient(ellipse at 12% 6%, var(--sage), transparent 48%), var(--paper);
}
[data-theme] .invitation-page :is(.invitation-card, input, button) { color: var(--ink); background: var(--surface); border-color: var(--line); }
[data-theme] .invitation-page :is(.invitation-contact, .invitation-note, button.invitation-selected) { color: var(--sage-ink); background: var(--sage); }
[data-theme] .invitation-page :is(.invitation-kicker, .invitation-contact span, .invitation-help, .invitation-details dt, .invitation-footer) { color: var(--muted); }
[data-theme] .invitation-page button.invitation-primary { color: var(--on-action); background: var(--forest); }
[data-theme] .invitation-page button.invitation-primary:hover:not(:disabled) { background: var(--action-hover); }
[data-theme] .invitation-page button:hover:not(:disabled) { background: var(--surface-raised); }
[data-theme] .invitation-page .invitation-error { color: var(--danger); background: var(--danger-surface); }
[data-theme] .invitation-page .invitation-status { color: var(--success); }
[data-theme] .guest-invitation-card > .muted { color: var(--muted); }

.settings-view { max-width: 1120px; min-width: 0; margin-inline: auto; }
.settings-view .subtitle { margin-bottom: 20px; }
.settings-local-banner {
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: 10px;
  color: var(--sage-ink);
  background: var(--sage);
  font-size: 13px;
  line-height: 1.6;
}
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.settings-panel { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.settings-panel h2 { font-size: 20px; margin-bottom: 9px; }
.settings-visibility { margin-top: 18px; }
.settings-copy { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.settings-options { min-width: 0; border: 0; padding: 0; margin: 20px 0 0; }
.settings-options legend { font-size: 12px; font-weight: 700; margin-bottom: 9px; padding: 0; }
.settings-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.settings-view .settings-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 68px; padding: 10px 6px; font-size: 12px;
  color: var(--ink); background: var(--surface-alt); border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.settings-view .settings-choice[aria-pressed="true"] { background: var(--sage); color: var(--sage-ink); border: 2px solid var(--forest); padding: 9px 5px; }
.settings-choice-selected { font-size: 10px; font-weight: 700; }
.settings-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); outline: 1px solid var(--line); }
.settings-swatch[data-palette="forest"] { background: #2d543f; }
.settings-swatch[data-palette="ocean"] { background: #245c70; }
.settings-swatch[data-palette="terracotta"] { background: #934d33; }
.settings-active-profile { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; margin: 16px 0; }
.settings-profile-email { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.settings-profile-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.settings-profile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.settings-profile-identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.settings-profile-identity strong { font-size: 14px; }
.settings-profile-active { color: var(--forest); font-size: 11px; font-weight: 700; }
.settings-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-profile-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 16px; border: 1px solid var(--line);
  border-radius: 9px; color: var(--forest); background: var(--surface);
  font-size: 13px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; overflow-wrap: anywhere;
}
.settings-profile-link:hover { background: var(--surface-alt); }
.settings-profile-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.settings-create-profile { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.settings-create-profile h3 { font-size: 16px; margin-bottom: 8px; }
.settings-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-form-fields label { min-width: 0; margin: 0 0 16px; }
.settings-view :is(button, input, summary) { min-height: 44px; }
.settings-view :is(button, input) { max-width: 100%; }
.settings-feedback { color: var(--forest); font-size: 13px; line-height: 1.6; }
.settings-feedback:empty { display: none; }
.settings-error { color: var(--danger); background: var(--danger-surface); border: 1px solid var(--danger); padding: 12px; border-radius: 8px; overflow-wrap: anywhere; font-size: 13px; }
.settings-testing { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.settings-testing summary { cursor: pointer; padding: 10px 0; color: var(--ink); font-weight: 600; }
.settings-testing ol { padding-left: 22px; margin: 8px 0 0; }
.settings-testing li { margin-bottom: 8px; overflow-wrap: anywhere; }
.settings-view [hidden] { display: none !important; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .settings-panel { padding: 16px; }
  .settings-form-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-form-fields input { font-size: 16px; }
  .settings-profile-actions { width: 100%; }
  .settings-profile-actions :is(button, .settings-profile-link) { flex: 1 1 120px; }
  .settings-profile { padding: 12px; }
  .settings-choices { gap: 6px; }
}