/* Synky Mail — application of Synky Solutions identity v1.0, October 2026.
   Original vector artwork and Manrope are supplied in public/branding and public/fonts. */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-Variable.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --synky-ink: #252A2B;
    --synky-paper: #F4F3EF;
    --synky-muted: #626762;
    --synky-accent: #22795B;
    --synky-accent-soft: #E9F4EE;
    --synky-border: #DEDFD9;
    --synky-hover: #1B634A;
    --synky-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.synkymail {
    --sm-ink: var(--synky-ink);
    --sm-muted: var(--synky-muted);
    --sm-background: var(--synky-paper);
    --sm-border: var(--synky-border);
    --sm-green: var(--synky-accent);
    --sm-mint: var(--synky-accent-soft);
    --sp-ink: var(--synky-ink);
    --sp-green: var(--synky-accent);
    --sp-paper: var(--synky-paper);
    --sp-mint: var(--synky-accent-soft);
    --sp-muted: var(--synky-muted);
    --sp-line: var(--synky-border);
    background: var(--synky-paper);
    color: var(--synky-ink);
    font-family: var(--synky-font);
}
.synkymail :is(button,input,select,textarea) { font-family: var(--synky-font); }
.synkymail :is(h1,h2,h3,h4) { font-family: var(--synky-font); }
.synkymail :focus-visible { outline-color: var(--synky-accent); }
.synkymail ::selection { background: #CBE4D7; color: var(--synky-ink); }

/* The signature remains original vector artwork. Compact product labels follow guide page 6. */
.synkymail .synkymail-wordmark.sy-brand {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    color: var(--synky-ink);
    font-family: var(--synky-font);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -.65px;
    line-height: 1.2;
    vertical-align: middle;
}
.sy-compact { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.sy-symbol, .sy-symbol img { display: block; width: 32px; height: 32px; flex: none; }
.sy-signature { display: none; }
.synkymail .sy-brand--signature, .synkymail .sy-brand--adaptive { padding: 8.2px; }
.sy-brand--signature .sy-signature, .sy-brand--adaptive .sy-signature {
    display: block; width: 234.2px; min-width: 234.2px; height: 56px; max-width: none;
}
.sy-brand--signature .sy-compact, .sy-brand--adaptive .sy-compact { display: none; }
.synkymail .sy-brand--micro { font-size: 12px; letter-spacing: -.3px; }
.sy-brand--micro .sy-symbol, .sy-brand--micro .sy-symbol img { width: 24px; height: 24px; }
.sy-brand--micro .sy-compact { gap: 7px; }
.sm-brand-row { margin-left: 4px; margin-right: 4px; }
.sm-login-brand { display: inline-flex; align-self: flex-start; margin-left: -8.2px; }
.sp-header>a, .sp-public-footer>a { flex: none; }
.sp-header { gap: 38px; }
.sp-header>.synkymail-wordmark, .sp-public-footer>.synkymail-wordmark { width: auto; }

/* Workspace shell, controls and actual data. Status colors keep their own meaning. */
.sm-sidebar, .sm-topbar { border-color: var(--synky-border); }
.sm-nav-link { font-weight: 600; }
.sm-nav-label, .sm-eyebrow { color: var(--synky-muted); }
.sm-nav-link.is-active { background: var(--synky-accent-soft); color: var(--synky-accent) !important; }
.sm-nav-link.is-active>.sm-icon { color: var(--synky-accent); }
.sm-nav-current { background: var(--synky-accent); }
.sm-avatar, .sm-workspace-mark { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sm-workspace-button { border-color: var(--synky-border); }
.sm-page-intro h1, .sm-welcome-copy h2 { font-weight: 300; color: var(--synky-ink); }
.sm-page-intro h1 { font-size: 33px; letter-spacing: -1.25px; }
.sm-greeting-dot { color: var(--synky-accent); }
.sm-page-intro p, .sm-footer, .sm-workspace-copy small { color: var(--synky-muted); }
.sm-welcome-banner { background: var(--synky-accent-soft); border-color: #CFE2D6; }
.sm-banner-eyebrow, .sm-banner-link, .sm-welcome-copy p { color: var(--synky-accent) !important; }
.sm-banner-eyebrow>span { background: var(--synky-accent); }
.sm-sidebar-note { background: var(--synky-paper); border-color: var(--synky-border); }
.sm-sidebar-note strong { color: var(--synky-ink); font-weight: 400; }
.sm-sidebar-note p { color: var(--synky-muted); }
.sm-sidebar-note a, .sm-note-symbol { color: var(--synky-accent); }
.synkymail .sm-button-dark, .synkymail .btn-primary {
    background: var(--synky-accent); border-color: var(--synky-accent); color: #FFF !important; font-weight: 600;
}
.synkymail .sm-button-dark:hover, .synkymail .btn-primary:hover,
.synkymail .btn-primary:focus, .synkymail .btn-primary:active {
    background: var(--synky-hover); border-color: var(--synky-hover); color: #FFF !important;
}
.synkymail .btn-primary:not(:disabled):not(.disabled):active { background: var(--synky-hover); border-color: var(--synky-hover); }
.synkymail .sm-button-secondary, .synkymail .sm-button-soft, .synkymail .btn-light {
    background: #FFF; border-color: var(--synky-border); color: var(--synky-ink);
}
.synkymail .sm-button-secondary:hover, .synkymail .sm-button-soft:hover, .synkymail .btn-light:hover { background: var(--synky-accent-soft); }
.synkymail .dropdown-item:focus, .synkymail .dropdown-item:hover { background: var(--synky-accent-soft); color: var(--synky-accent); }
.synkymail .form-control:focus { border-color: var(--synky-accent); box-shadow: 0 0 0 2px #22795B18; }
.synkymail .page-item.active .page-link { background: var(--synky-accent); border-color: var(--synky-accent); }
.sm-sidebar-account strong, .sm-step-copy strong, .sm-section-label, .sm-table-heading, .sm-panel-title { font-weight: 600; }
.sm-step-number, .sm-empty-icon, .sm-page-empty-art>span { color: var(--synky-accent); background: var(--synky-accent-soft); border-color: #D0E5D9; }
.sm-metric-value { color: var(--synky-ink); font-weight: 300; }
.sm-card, .sm-metric-card, .sm-panel, .sm-page-empty, .synkymail .card { border-color: var(--synky-border); }
.synkymail .table-responsive { position: relative; max-width: 100%; }
.sm-status-draft { color: var(--synky-muted); background: var(--synky-paper); }
.sm-status-sent { color: var(--synky-accent); background: var(--synky-accent-soft); }
.sm-chart-series button:first-child i, .sm-series-sent i { background: var(--synky-accent); }
.sm-dot-sent, .sm-dot-active { background: var(--synky-accent); }
.sm-dot-inactive { background: #D9DDD8; }
.sm-setup-progress progress { accent-color: var(--synky-accent); }
.sm-setup-progress progress::-webkit-progress-value { background: var(--synky-accent); }
.sm-setup-progress progress::-moz-progress-bar { background: var(--synky-accent); }
.sm-campaign-tabs a.is-active { color: var(--synky-accent); border-color: var(--synky-accent); }
.sm-text-link, .sm-empty-secondary { color: var(--synky-accent) !important; }

/* Account access. */
.sm-login-visual { background: var(--synky-paper); border-color: var(--synky-border); }
.sm-login-form-wrap h1, .sm-login-visual h2 { color: var(--synky-ink); font-weight: 300; letter-spacing: -1.5px; }
.sm-login-form-wrap>p, .sm-login-visual p, .sm-login-footer { color: var(--synky-muted); }
.sm-login-remember input { accent-color: var(--synky-accent); }
.sm-login-forgot { color: var(--synky-accent) !important; }
.sm-login-edition { color: var(--synky-muted); }
.sp-free-included { color: var(--synky-muted); border-color: var(--synky-border); }
.sp-free-included strong { color: var(--synky-ink); font-weight: 600; }
.sp-free-included>span:before { color: var(--synky-accent); }

/* Public website. Illustrative emails retain their own creative identities. */
body.synkymail.sp-public { background: var(--synky-paper); color: var(--synky-ink); font-family: var(--synky-font); }
.sp-public :is(h1,h2,h3), .sp-connect-section h2, .sp-final-cta h2 { font-family: var(--synky-font); }
.sp-public .sp-hero h1, .sp-section h2, .sp-connect-section h2, .sp-final-cta h2 { font-weight: 300; letter-spacing: -2.7px; }
.sp-public em, .sp-plan-current em { color: var(--synky-accent); font-style: normal; font-weight: inherit; }
.sp-kicker, .sp-public .sp-kicker { color: var(--synky-muted); font-weight: 600; }
.sp-kicker>span { background: var(--synky-accent); }
.sp-public .sp-btn { background: var(--synky-accent); border-color: var(--synky-accent); font-weight: 600; }
.sp-public .sp-btn:hover { background: var(--synky-hover); border-color: var(--synky-hover); }
.sp-public .sp-btn-outline { background: #FFF; border-color: var(--synky-border); color: var(--synky-accent) !important; }
.sp-public .sp-btn-outline:hover { background: var(--synky-accent-soft); }
.sp-public .sp-text-link, .sp-public .sp-login { color: var(--synky-accent); }
.sp-hero>p, .sp-hero>small, .sp-section-intro>p, .sp-feature-grid p, .sp-connect-section>div>p,
.sp-steps p, .sp-benefit-strip>span, .sp-pricing-note, .sp-faq details p { color: var(--synky-muted); }
.sp-product { border-color: var(--synky-border); box-shadow: 0 15px 60px #252A2B0A; }
.sp-product-bar, .sp-preview-nav { background: var(--synky-paper); border-color: var(--synky-border); }
.sp-preview-workspace { border-color: var(--synky-border); }
.sp-preview-nav>div.selected { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sp-preview-note { background: #FFF; border-color: var(--synky-border); }
.sp-preview-save { background: var(--synky-accent); }
.sp-preview-controls>div { border-color: var(--synky-border); }
.sp-feature-grid h3 { color: var(--synky-ink); font-weight: 400; }
.sp-feature-number { color: var(--synky-muted); }
.sp-feature-art { background: #E9EBE6; }
.sp-art-audience>span:nth-child(2), .sp-art-chart i:nth-child(7) { background: var(--synky-accent); }
.sp-art-chart i { background: #AACBBB; }
.sp-connect-section, .sp-final-cta { background: var(--synky-accent-soft); }
.sp-steps li { border-color: #CCDFD3; }
.sp-steps li>span { border-color: #B4D5C3; color: var(--synky-accent); }
.sp-steps h3, .sp-steps .sm-icon { color: var(--synky-ink); }
.sp-price-card { border-color: var(--synky-border); }
.sp-price-pro { background: var(--synky-accent-soft); border-color: #A7CDB9; }
.sp-price-top h3, .sp-price, .sp-price-card li { color: var(--synky-ink); }
.sp-price { font-weight: 300; }
.sp-price-top>span, .sp-price-card>p, .sp-price-card>small, .sp-price>span { color: var(--synky-muted); }
.sp-price-card ul { border-color: #D2E2D8; }
.sp-faq details, .sp-benefit-strip, .sp-feature-grid article { border-color: var(--synky-border); }
.sp-faq summary { color: var(--synky-ink); font-weight: 600; }
.sp-faq summary:after { color: var(--synky-accent); }
.sp-final-cta>small, .sp-public-footer>span { color: var(--synky-muted); }
.sp-public-footer a { color: var(--synky-accent); }

/* Company setup, plans and administration. */
.sp-panel, .sp-admin-metrics section { border-color: var(--synky-border); }
.sp-panel :is(h2,h3), .sp-panel-heading h2, .sp-plan-current h2 { color: var(--synky-ink); font-weight: 300; }
.sp-panel h3 { font-weight: 400; }
.sp-panel :is(label,.form-control), .sp-panel header>p, .sp-panel-heading p, .sp-panel .sp-field-help,
.sp-plan-current p, .sp-plan-current small, .sp-billing-status p { color: var(--synky-muted); }
.sp-panel label { font-weight: 600; }
.sp-panel .form-control { border-color: var(--synky-border); color: var(--synky-ink); }
.sp-setup, .sp-plan-current, .sp-admin-banner { background: var(--synky-accent-soft); border-color: #D0E3D6; }
.sp-setup li>span, .sp-setup li.done>span { background: #FFF; color: var(--synky-accent); border-color: #C9DFD2; }
.sp-setup strong, .sp-mini-plan strong, .sp-provider-row strong { color: var(--synky-ink); }
.sp-setup li p { color: var(--synky-muted); }
.sp-setup li a, .sp-mini-plan>a, .sp-provider-row a { color: var(--synky-accent); }
.sp-mini-plan p, .sp-provider-row small { color: var(--synky-muted); }
.sp-provider-icon, .sp-provider-selector a.selected { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sp-provider-selector a { border-color: var(--synky-border); color: var(--synky-muted); }
.sp-provider-selector a.selected { border-color: #AFD0BC; }
.sp-panel progress { color: var(--synky-accent); background: var(--synky-accent-soft); }
.sp-panel progress::-webkit-progress-bar { background: var(--synky-accent-soft); }
.sp-panel progress::-webkit-progress-value { background: var(--synky-accent); }
.sp-panel progress::-moz-progress-bar { background: var(--synky-accent); }
.sp-pill:not(.sp-pill-pending):not(.sp-pill-paused) { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sp-current-plan-price, .sp-usage-value { color: var(--synky-ink); font-weight: 300; }
.sp-usage-value>span { color: var(--synky-muted); }
.sp-plan-current h2 { font-size: 36px; }
.sp-internal-pricing .sp-btn { background: var(--synky-accent); border-color: var(--synky-accent); font-weight: 600; }
.sp-internal-pricing .sp-price, .sp-internal-pricing h3 { color: var(--synky-ink); }
.sp-current-plan-label, .sp-back-link, .sp-billing-status a { color: var(--synky-accent); }
.sp-notice { background: var(--synky-accent-soft); border-color: #CFE2D6; color: #385648; }
.sp-plan-footnote { color: var(--synky-muted); }
.sp-admin-shell { background: var(--synky-paper); color: var(--synky-ink); }
.sp-admin-header, .sp-admin-nav { border-color: var(--synky-border); }
.sp-admin-label, .sp-admin-header>div>a, .sp-admin-header form button, .sp-admin-shell .sp-kicker { color: var(--synky-muted); }
.sp-admin-nav>a { color: var(--synky-muted); font-weight: 600; }
.sp-admin-nav>a.selected { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sp-admin-nav>div { background: var(--synky-paper); border-color: var(--synky-border); }
.sp-admin-nav strong { color: var(--synky-ink); font-weight: 300; }
.sp-admin-page-title h1 { color: var(--synky-ink); font-weight: 300; font-size: 34px; }
.sp-admin-metrics strong { color: var(--synky-ink); font-weight: 300; }
.sp-admin-metrics section>span, .sp-admin-shell :is(p,small), .sp-admin-banner p { color: var(--synky-muted); }
.sp-admin-banner h2 { color: var(--synky-ink); font-weight: 400; }
.sp-admin-filters { background: var(--synky-paper); border-color: var(--synky-border); }
.sp-admin-filters input, .sp-admin-filters select { color: var(--synky-ink); }
.sp-admin-shell .sp-company-table strong, .sp-admin-shell .sp-admin-notes strong,
.sp-admin-shell .sp-owner-card h2, .sp-admin-shell .sp-company-table td { color: var(--synky-ink); }
.sp-admin-shell .sp-company-table th, .sp-admin-shell .sp-company-table small, .sp-admin-footer { color: var(--synky-muted); }
.sp-company-avatar, .sp-owner-avatar { background: var(--synky-accent-soft); color: var(--synky-accent); }
.sp-plan-tag { color: var(--synky-accent); border-color: #CBE1D3; }
.sp-table-open, .sp-admin-notes .sm-icon { color: var(--synky-accent); }
.sp-owner-meta strong, .sp-company-summary>p strong { color: var(--synky-ink); }
.sp-admin-create-note { background: var(--synky-accent-soft); }
.sp-audit-row strong { color: var(--synky-ink); }
.sp-status-page { background: var(--synky-paper); }
.sp-status-page h1 { color: var(--synky-ink); font-weight: 300; }
.sp-status-page p, .sp-status-page .sp-kicker { color: var(--synky-muted); }
.sp-status-page section>div>a { color: var(--synky-accent); }

/* Editor chrome and integration pages, separate from customer email artwork. */
.es-library-hero { background: var(--synky-ink); }
.es-library-hero h2, .cg-hero h2, .cg-auth h1 { font-weight: 300; }
.es-filter.is-active, .es-mobile-tabs, .es-section-number, .es-saved-icon { background: var(--synky-accent-soft); color: var(--synky-accent); }
.es-editor-actions .btn-primary { background: var(--synky-accent); border-color: var(--synky-accent); }
.es-editor input:focus, .es-editor textarea:focus { outline-color: var(--synky-accent); }
.es-preview-stage { background: var(--synky-paper); border-color: var(--synky-border); }
.es-preview-toolbar>div:first-child, .es-library-tools p, .es-template-copy p, .es-saved-copy p { color: var(--synky-muted); }
.cg-hero { background: var(--synky-accent-soft); border-color: #CCE0D3; }
.cg-connection-art>span:first-child { padding: 0; border: 0; background: none; box-shadow: none; }
.cg-connection-art>span:first-child img { display: block; width: 49px; height: 49px; }
.cg-connection-art>span:last-child { color: #FFF; background: var(--synky-ink); border-color: var(--synky-ink); }
.cg-card, .cg-auth-card { border-color: var(--synky-border); }
.cg-auth { background: var(--synky-paper); }
.cg-endpoint, .cg-prompt, .cg-auth-user { background: var(--synky-accent-soft); border-color: #D4E5DA; color: var(--synky-ink); }
.cg-steps b, .cg-status { color: var(--synky-accent); background: var(--synky-accent-soft); }
.cg-hero p, .cg-capabilities p, .cg-steps p, .cg-empty, .cg-card label, .cg-auth p, .cg-auth ul { color: var(--synky-muted); }

@media (max-width: 1199px) {
    .sp-header { gap: 22px; }
}
@media (max-width: 991px) {
    .sp-header .sy-brand--adaptive .sy-signature { display: none; }
    .sp-header .sy-brand--adaptive .sy-compact { display: inline-flex; }
    .synkymail .sp-header .sy-brand--adaptive { padding: 0; }
}
@media (max-width: 767px) {
    .synkymail .sy-brand { font-size: 18px; }
    .sy-symbol, .sy-symbol img { width: 24px; height: 24px; }
    .sy-compact { gap: 8px; }
    .sy-brand--adaptive .sy-signature { display: none; }
    .sy-brand--adaptive .sy-compact { display: inline-flex; }
    .synkymail .sy-brand--adaptive { padding: 0; }
    .synkymail .sy-brand--micro { font-size: 11px; }
    .sp-header { gap: 15px; }
    .sp-public .sp-hero h1 { font-size: clamp(32px,10vw,41px); letter-spacing: -1.8px; }
    .sp-section h2, .sp-connect-section h2 { letter-spacing: -1.4px; }
    .sp-admin-page-title h1 { font-size: 29px; }
    .sm-page-intro h1 { font-size: 30px; }
    .sp-plan-current h2 { font-size: 29px; }
    .sp-public-footer .sy-brand { font-size: 16px; }
    .sp-admin-header .sy-brand { font-size: 18px; }
}
@media (max-width: 374px) {
    .synkymail .sp-header .sy-brand { font-size: 16px; letter-spacing: -.5px; }
    .sp-header .sy-compact { gap: 6px; }
    .sp-header .sp-btn-small { padding-left: 9px; padding-right: 9px; }
    .sp-header { gap: 10px; }
    .sp-admin-header .sy-brand { font-size: 16px; }
}