.sync-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111;
}

.sync-hero {
    text-align: center;
    margin-bottom: 28px;
}
.sync-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.sync-hero p {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
}

.sync-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}
.sync-preset {
    padding: 8px 14px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sync-preset:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.sync-form {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    margin-bottom: 24px;
}

.sync-when,
.sync-then {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sync-when-label,
.sync-then-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111;
    min-width: 48px;
}

.sync-logic {
    padding: 6px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
}

.sync-conditions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.sync-condition {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 720px;
}
.sync-condition select,
.sync-condition input {
    padding: 8px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
}
/* Fixed basis widths so the row layout doesn't reflow when the operator
   changes (e.g. switching to "is true" drops the value input). */
.sync-field-select { flex: 0 0 220px; }
.sync-op-select    { flex: 0 0 auto; }
.sync-value-input  { flex: 0 1 260px; min-width: 120px; }

.sync-remove-condition {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    background: transparent;
    color: #9ca3af;
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
}
.sync-remove-condition:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.sync-add-condition {
    padding: 6px 12px;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 16px;
}
.sync-add-condition:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.sync-action-toggle {
    display: inline-flex;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.sync-action {
    padding: 8px 14px;
    border: none;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}
.sync-action + .sync-action {
    border-left: 1.5px solid #e5e7eb;
}
.sync-action-active {
    background: #111;
    color: #fff;
}

.sync-customize {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}
.sync-customize label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #374151;
    font-weight: 500;
}
.sync-customize input {
    padding: 8px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
}

.sync-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.sync-primary-cta {
    padding: 10px 20px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.sync-primary-cta:hover { background: #333; }
.sync-primary-cta:disabled { opacity: 0.5; cursor: default; }
.sync-cta-note {
    font-size: 0.82rem;
    color: #6b7280;
}

.sync-preview {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    background: #fafafa;
}
.sync-preview-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
}
.sync-preview-subtitle {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: #6b7280;
}
.sync-preview-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sync-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
}
.sync-preview-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 42px;
    text-align: center;
}
.sync-preview-pass .sync-preview-label { background: #dcfce7; color: #166534; }
.sync-preview-skip .sync-preview-label { background: #fee2e2; color: #991b1b; }

.sync-preview-event-title { flex: 1 1 auto; font-weight: 500; }
.sync-preview-skip .sync-preview-event-title {
    text-decoration: line-through;
    color: #9ca3af;
}
.sync-preview-event-meta { color: #6b7280; font-size: 0.78rem; }
.sync-preview-error { padding: 12px; color: #b91c1c; font-size: 0.85rem; }

/* Creator page additions */
.sync-save-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
.sync-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}
.sync-field input,
.sync-field select {
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}
.sync-save-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}
.sync-save-status { font-size: 0.85rem; color: #6b7280; }

/* List page */
.sync-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sync-list-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.sync-link {
    color: #111;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
}
.sync-link:hover { background: #f3f4f6; }

.sync-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.sync-list th,
.sync-list td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.sync-list th {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sync-list code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: #4a6fa5;
}
.sync-delete-btn {
    padding: 6px 12px;
    border: 1.5px solid #fecaca;
    border-radius: 6px;
    background: #fff;
    color: #b91c1c;
    font-size: 0.8rem;
    cursor: pointer;
}
.sync-delete-btn:hover { background: #fee2e2; }

.sync-toggle input { margin: 0; }

.sync-empty {
    text-align: center;
    padding: 40px 20px;
    border: 1.5px dashed #e5e7eb;
    border-radius: 12px;
}
.sync-empty p { margin: 0 0 16px; color: #6b7280; }

/* ────────────────────────────────────────────────────────────────────────── */
/* Landing page — v2 marketing treatment                                      */
/* ────────────────────────────────────────────────────────────────────────── */

/* Palette */
:root {
    --sync-green: #d4fb3c;
    --sync-green-dim: #bfe234;
    --sync-black: #0a0a0a;
    --sync-warm-white: #fafaf5;
    --sync-body: #4b5563;
    --sync-border: #e5e7eb;
    --sync-border-strong: #0a0a0a;
}

/* Scope-only font override — the rest of the app keeps Inter from base. */
.sync-landing,
.sync-landing * {
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sync-landing .sync-display-headline,
.sync-landing .sync-section-headline,
.sync-landing h1,
.sync-landing h2,
.sync-landing h3 {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}
.sync-landing code,
.sync-landing .sync-inline-code,
.sync-landing .sync-mock-annotation,
.sync-landing .sync-version-badge,
.sync-landing .sync-mock-label,
.sync-landing .sync-mock-meta,
.sync-landing .sync-mock-connector-badge,
.sync-landing .sync-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* Layout */
.sync-landing {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    color: var(--sync-black);
    background: transparent;
}

.sync-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    min-height: 540px;
    padding-bottom: 80px;
}
@media (max-width: 900px) {
    .sync-landing-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-bottom: 48px;
    }
}

/* Version badge */
.sync-version-badge {
    display: inline-block;
    padding: 6px 12px;
    background: var(--sync-black);
    color: var(--sync-green);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    border-radius: 6px;
    margin-bottom: 32px;
}
.sync-version-badge-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sync-version-badge-link:hover {
    color: #fff;
}

/* Display headline */
.sync-display-headline {
    margin: 0 0 32px;
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--sync-black);
}
/* Lifts "your calendars" above the green highlight on the next line so
   the y-descender stays visible instead of getting painted over. */
.sync-overhang {
    position: relative;
    z-index: 1;
}
.sync-highlight {
    display: inline;
    background: var(--sync-green);
    padding: 0 10px 2px;
    position: relative;
    z-index: 0;
    /* Box-decoration-break keeps the highlight visually continuous if the
       phrase ever wraps across lines on very narrow viewports. */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.sync-landing-lead {
    margin: 0 0 40px;
    max-width: 520px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--sync-body);
    font-weight: 400;
}
.sync-inline-code {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--sync-black);
    white-space: nowrap;
}

/* Hero CTAs */
.sync-landing-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.sync-cta-black,
.sync-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid var(--sync-black);
    transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.sync-cta-black {
    background: var(--sync-black);
    color: var(--sync-green);
}
.sync-cta-black:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}
.sync-cta-outline {
    background: #fff;
    color: var(--sync-black);
}
.sync-cta-outline:hover {
    background: var(--sync-black);
    color: #fff;
}
.sync-cta-arrow { font-weight: 700; }

/* Right-column mock cards */
.sync-landing-hero-mock {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 420px;
    justify-self: end;
    width: 100%;
}
@media (max-width: 900px) {
    .sync-landing-hero-mock {
        justify-self: stretch;
        max-width: none;
    }
}

.sync-mock-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    padding: 18px 22px;
}
/* Offset "double-border" shadow — matches the punched-forward look of the mockup */
.sync-mock-card-source {
    box-shadow: 10px 10px 0 0 var(--sync-green);
    margin-right: 14px;
}
.sync-mock-card-dest {
    box-shadow: 10px 10px 0 0 var(--sync-black);
    margin-right: 14px;
}

.sync-mock-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #6b7280;
    margin-bottom: 10px;
}
.sync-mock-chip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid var(--sync-black);
}
.sync-mock-chip-green { background: var(--sync-green); }
.sync-mock-chip-black { background: var(--sync-black); }

.sync-mock-title {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sync-black);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
.sync-mock-meta {
    font-size: 0.78rem;
    color: #6b7280;
    letter-spacing: 0.02em;
}
.sync-mock-annotation {
    color: var(--sync-green-dim);
    margin-left: 6px;
    font-weight: 500;
}

/* Vertical dashed connector with center badge */
.sync-mock-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    margin-right: 14px;
}
.sync-mock-connector-line {
    width: 2px;
    height: 18px;
    background-image: linear-gradient(to bottom, var(--sync-black) 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}
.sync-mock-connector-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--sync-black);
    color: var(--sync-green);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    border-radius: 6px;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Builder section on the landing page (uses the shared _builder.html partial) */
/* ────────────────────────────────────────────────────────────────────────── */

.sync-builder-section {
    padding-top: 24px;
    border-top: 2px solid var(--sync-black);
    margin-top: 24px;
}
.sync-builder-heading {
    margin-bottom: 32px;
    max-width: 640px;
}
.sync-eyebrow {
    display: inline-block;
    padding: 4px 10px;
    background: var(--sync-green);
    color: var(--sync-black);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    border-radius: 4px;
    margin-bottom: 16px;
}
.sync-section-headline {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--sync-black);
}
.sync-section-sub {
    margin: 0;
    color: var(--sync-body);
    font-size: 1rem;
    line-height: 1.55;
}
.sync-section-sub strong { color: var(--sync-black); font-weight: 700; }

/* Builder inside the landing — beef up the borders so it reads the same weight
   as the mock cards above. Scope everything to .sync-landing so we don't
   affect the creator/list pages that still use booking-base aesthetics. */
.sync-landing .sync-builder {
    display: block;
    background: #fff;
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.sync-landing .sync-form {
    border: none;
    padding: 0;
    margin: 0 0 16px;
}
.sync-landing .sync-preset {
    background: #fff;
    border: 1.5px solid var(--sync-black);
    color: var(--sync-black);
    font-weight: 500;
}
.sync-landing .sync-preset:hover {
    background: var(--sync-green);
    border-color: var(--sync-black);
}
.sync-landing .sync-when-label,
.sync-landing .sync-then-label {
    font-weight: 700;
    color: var(--sync-black);
}
.sync-landing .sync-logic,
.sync-landing .sync-condition select,
.sync-landing .sync-condition input,
.sync-landing .sync-customize input {
    border: 1.5px solid var(--sync-black);
    border-radius: 8px;
}
.sync-landing .sync-action-toggle {
    border: 1.5px solid var(--sync-black);
}
.sync-landing .sync-action + .sync-action {
    border-left: 1.5px solid var(--sync-black);
}
.sync-landing .sync-action-active {
    background: var(--sync-black);
    color: var(--sync-green);
}
.sync-landing .sync-add-condition {
    border: 1.5px dashed var(--sync-black);
    color: var(--sync-black);
}
.sync-landing .sync-add-condition:hover {
    background: var(--sync-green);
    border-style: solid;
}

/* Primary CTA inside the builder ("Create this sync") */
.sync-landing .sync-primary-cta {
    background: var(--sync-black);
    color: var(--sync-green);
    padding: 14px 24px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 10px;
}
.sync-landing .sync-primary-cta:hover { background: #1a1a1a; }
.sync-landing .sync-primary-cta:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    opacity: 1;
}
.sync-landing .sync-cta-note {
    font-size: 0.8rem;
    color: var(--sync-body);
}

/* Preview pane */
.sync-landing .sync-preview {
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    background: var(--sync-warm-white);
    padding: 24px;
}
.sync-landing .sync-preview-title {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sync-landing .sync-preview-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sync-body);
}
.sync-landing .sync-preview-row {
    border: 1.5px solid var(--sync-black);
}
.sync-landing .sync-preview-pass .sync-preview-label {
    background: var(--sync-green);
    color: var(--sync-black);
}
.sync-landing .sync-preview-skip .sync-preview-label {
    background: var(--sync-black);
    color: #fff;
}

/* Inline OAuth provider choice */
.sync-provider-choice {
    margin-top: 20px;
    padding: 24px;
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    background: var(--sync-warm-white);
    box-shadow: 10px 10px 0 0 var(--sync-green);
    margin-right: 14px;
}
.sync-provider-choice[hidden] { display: none; }
.sync-provider-note {
    margin: 0 0 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sync-black);
    font-weight: 500;
}
.sync-provider-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.sync-provider-btn {
    flex: 1 1 200px;
    padding: 14px 18px;
    border: 2px solid var(--sync-black);
    border-radius: 10px;
    background: #fff;
    color: var(--sync-black);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.08s;
}
.sync-provider-btn:hover {
    background: var(--sync-black);
    color: var(--sync-green);
    transform: translateY(-1px);
}
.sync-provider-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}
.sync-provider-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sync-body);
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Workspace (/calendar-sync/home) — inherits .sync-landing base, adds layout */
/* specific to the authed list + inline builder card.                         */
/* ────────────────────────────────────────────────────────────────────────── */

.sync-workspace {
    /* Workspace inherits .sync-landing (max-width 1200, margin 0 auto). Keep
       it wide enough to hold the table comfortably on large screens without
       stretching to the full viewport. */
    padding-top: 24px;
}
.sync-workspace .sync-list-calendars {
    /* Safety: if an integration gets deleted we fall back to the raw
       provider:account:calendar_id key in the label helper, which can be very
       long (esp. Microsoft). Break it instead of overflowing the cell. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.sync-workspace .sync-list th.sync-last-run-th,
.sync-workspace .sync-list .sync-last-run-cell { white-space: nowrap; }
.sync-workspace-header {
    margin-bottom: 32px;
}
.sync-display-headline-compact {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0;
}

.sync-list-section {
    margin-bottom: 40px;
}
.sync-workspace .sync-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}
.sync-workspace .sync-list-header .sync-section-headline {
    margin: 0;
    font-size: 1.4rem;
}
.sync-workspace .sync-cta-black {
    padding: 12px 20px;
    font-size: 0.78rem;
    cursor: pointer;
    background: var(--sync-black);
    color: var(--sync-green);
    border: 2px solid var(--sync-black);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.sync-workspace .sync-cta-black:hover { background: #1a1a1a; }

.sync-workspace .sync-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    font-size: 0.88rem;
}
.sync-workspace .sync-list th {
    background: var(--sync-black);
    color: var(--sync-green);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 14px;
    text-align: left;
}
.sync-workspace .sync-list td {
    padding: 14px;
    border-top: 1.5px solid var(--sync-border);
}
.sync-workspace .sync-list tbody tr:first-child td {
    border-top: none;
}
.sync-workspace .sync-list code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    color: var(--sync-black);
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}
.sync-workspace .sync-status-ok  { color: #166534; font-weight: 500; }
.sync-workspace .sync-status-error { color: #991b1b; font-weight: 600; }
.sync-workspace .sync-status-pending {
    color: var(--sync-body);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.sync-workspace .sync-run-btn,
.sync-workspace .sync-edit-btn,
.sync-workspace .sync-delete-btn {
    padding: 6px 12px;
    border: 1.5px solid var(--sync-black);
    border-radius: 6px;
    background: #fff;
    color: var(--sync-black);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: 4px;
}
.sync-workspace .sync-run-btn:hover,
.sync-workspace .sync-edit-btn:hover { background: var(--sync-green); }

.sync-workspace .sync-list-calendars {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
}
.sync-workspace .sync-list-arrow {
    color: var(--sync-body);
    font-weight: 600;
}
.sync-workspace .sync-delete-btn {
    border-color: #fca5a5;
    color: #991b1b;
}
.sync-workspace .sync-delete-btn:hover { background: #fee2e2; border-color: #991b1b; }

/* Inline builder card */
.sync-builder-card {
    background: #fff;
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 10px 10px 0 0 var(--sync-green);
    margin-right: 14px;
    margin-bottom: 40px;
}
.sync-builder-card[hidden] { display: none; }
.sync-builder-card .sync-builder-heading {
    margin-bottom: 24px;
}

.sync-workspace .sync-save-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0;
    border: none;
    background: transparent;
}
.sync-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .sync-field-row { grid-template-columns: 1fr; }
}
/* Grid items default to min-content sizing, so a <select> with a 500px
   option text can push its column past 1fr. Force min-width:0 so the
   columns stay 50/50 and the selects truncate instead of overflowing. */
.sync-field-row > * { min-width: 0; }

.sync-workspace .sync-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sync-black);
    font-weight: 500;
    min-width: 0;
}
.sync-workspace .sync-field input,
.sync-workspace .sync-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 2px solid var(--sync-black);
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    background: #fff;
    color: var(--sync-black);
    text-overflow: ellipsis;
}
.sync-workspace .sync-field input:focus,
.sync-workspace .sync-field select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sync-green);
}

.sync-connect-more {
    display: flex;
    gap: 14px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--sync-body);
    letter-spacing: 0.08em;
    flex-wrap: wrap;
}
.sync-connect-more a {
    color: var(--sync-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.sync-connect-more a:hover { color: var(--sync-green-dim); }

.sync-workspace .sync-builder {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    margin: 24px 0;
}
.sync-workspace .sync-form {
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    margin: 0 0 20px;
}
.sync-workspace .sync-preset {
    background: #fff;
    border: 1.5px solid var(--sync-black);
    color: var(--sync-black);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
}
.sync-workspace .sync-preset:hover {
    background: var(--sync-green);
    border-color: var(--sync-black);
}
.sync-workspace .sync-when-label,
.sync-workspace .sync-then-label {
    font-weight: 700;
    color: var(--sync-black);
}
.sync-workspace .sync-logic,
.sync-workspace .sync-condition select,
.sync-workspace .sync-condition input,
.sync-workspace .sync-customize input {
    border: 1.5px solid var(--sync-black);
    border-radius: 8px;
}
.sync-workspace .sync-action-toggle {
    border: 1.5px solid var(--sync-black);
}
.sync-workspace .sync-action + .sync-action {
    border-left: 1.5px solid var(--sync-black);
}
.sync-workspace .sync-action-active {
    background: var(--sync-black);
    color: var(--sync-green);
}
.sync-workspace .sync-add-condition {
    border: 1.5px dashed var(--sync-black);
    color: var(--sync-black);
}
.sync-workspace .sync-add-condition:hover {
    background: var(--sync-green);
    border-style: solid;
}

.sync-workspace .sync-preview {
    border: 2px solid var(--sync-black);
    border-radius: 12px;
    background: var(--sync-warm-white);
    padding: 24px;
}
.sync-workspace .sync-preview-title {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sync-workspace .sync-preview-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sync-body);
}
.sync-workspace .sync-preview-row {
    border: 1.5px solid var(--sync-black);
}
.sync-workspace .sync-preview-pass .sync-preview-label {
    background: var(--sync-green);
    color: var(--sync-black);
}
.sync-workspace .sync-preview-skip .sync-preview-label {
    background: var(--sync-black);
    color: #fff;
}

.sync-save-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.sync-workspace .sync-primary-cta {
    padding: 14px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 10px;
    background: var(--sync-black);
    color: var(--sync-green);
    border: 2px solid var(--sync-black);
    cursor: pointer;
}
.sync-workspace .sync-primary-cta:hover { background: #1a1a1a; }
.sync-workspace .sync-primary-cta:disabled {
    opacity: 0.5;
    cursor: default;
}
.sync-workspace .sync-link {
    background: none;
    border: none;
    padding: 8px 12px;
    color: var(--sync-body);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sync-workspace .sync-link:hover { color: var(--sync-black); }
.sync-workspace .sync-save-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--sync-body);
    letter-spacing: 0.06em;
}

.sync-empty-nudge {
    margin: 0 0 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--sync-body);
    text-transform: uppercase;
}
.sync-empty-accounts {
    border: 2px dashed var(--sync-black);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: var(--sync-warm-white);
}
.sync-empty-accounts p {
    margin: 0 0 20px;
    font-size: 1rem;
    color: var(--sync-black);
}
.sync-empty-accounts .sync-provider-buttons {
    justify-content: center;
}
.sync-empty-accounts .sync-provider-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Framing banner at top of builder: explains the source→destination
   direction so users don't think the rule modifies their source events. */
.sync-builder-banner {
    display: block;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--sync-green);
    border: 2px solid var(--sync-black);
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--sync-black);
    line-height: 1.5;
}
.sync-builder-banner strong { font-weight: 700; }

.sync-customize-hint {
    margin: 0 0 6px;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sync-body);
}

/* Plain-English explainer that sits under the Pass/Block/Customize toggle
   and updates as the user switches actions. */
.sync-action-hint {
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--sync-body);
    font-style: italic;
    min-height: 1.2em;
}

/* The customize <select> fields should match the <input> styling. */
.sync-landing .sync-customize select,
.sync-workspace .sync-customize select {
    padding: 8px 10px;
    border: 1.5px solid var(--sync-black);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: #fff;
    color: var(--sync-black);
}