/* Shared Engage foundation. See docs/BRAND_GUIDELINES.md. */
:root {
  --engage-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --engage-text-min: .9375rem;
  --engage-text-base: 1rem;
  --engage-text-title: 1.875rem;
  --engage-text-section: 1.375rem;
  --engage-text-card: 1.125rem;
  --engage-text-metric: 2rem;
  --engage-primary: #6D28D9;
  --engage-primary-hover: #5B21B6;
  --engage-primary-pressed: #4C1D95;
  --engage-primary-soft: #F3E8FF;
  --engage-primary-soft-text: #5B21B6;
  --engage-bg: #F8FAFC;
  --engage-surface: #FFFFFF;
  --engage-surface-subtle: #F1F5F9;
  --engage-text: #0F172A;
  --engage-text-secondary: #475569;
  --engage-border: #E2E8F0;
  --engage-control-border: #64748B;
  --engage-focus: #7C3AED;
  --engage-success: #166534;
  --engage-success-bg: #DCFCE7;
  --engage-warning: #92400E;
  --engage-warning-bg: #FEF3C7;
  --engage-danger: #B91C1C;
  --engage-danger-bg: #FEE2E2;
  --engage-info: #1E40AF;
  --engage-info-bg: #DBEAFE;
  --engage-disabled-bg: #E2E8F0;
  --engage-disabled-text: #475569;
  --engage-radius-control: 8px;
  --engage-radius-card: 12px;
  --engage-shadow: 0 2px 8px rgb(15 23 42 / 5%);
  --bs-body-font-family: var(--engage-font);
  --bs-body-font-size: var(--engage-text-base);
  --bs-body-color: var(--engage-text);
  --bs-body-bg: var(--engage-bg);
  --bs-secondary-color: var(--engage-text-secondary);
  --bs-secondary-rgb: 71, 85, 105;
  --bs-border-color: var(--engage-border);
  --bs-link-color: var(--engage-primary);
  --bs-link-hover-color: var(--engage-primary-hover);
  --bs-danger-rgb: 185, 28, 28;
  --bs-success-rgb: 22, 101, 52;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { font-family: var(--engage-font); font-size: var(--engage-text-base); line-height: 1.5; color: var(--engage-text); background: var(--engage-bg); }
button, input, select, textarea { font: inherit; }
a { color: var(--engage-primary); text-underline-offset: .2em; }
a:hover { color: var(--engage-primary-hover); }
a:active { color: var(--engage-primary-pressed); }
h1, h2, h3 { font-weight: 600; }
h1 { font-size: var(--engage-text-title); line-height: 1.25; }
h2 { font-size: var(--engage-text-section); line-height: 1.35; }
h3 { font-size: var(--engage-text-card); line-height: 1.4; }
small, .small, .form-text, .badge, .tooltip-inner, .popover-body,
.pagination, .dropdown-menu, .breadcrumb, .invalid-feedback, .valid-feedback,
.invalid-tooltip, .valid-tooltip, .popover-header, .btn-close, .input-group-text,
code, kbd, samp, sub, sup { font-size: var(--engage-text-min); }
.form-text, .text-muted { color: var(--engage-text-secondary) !important; }
.tooltip { --bs-tooltip-font-size: var(--engage-text-min); --bs-tooltip-bg: var(--engage-text); --bs-tooltip-color: var(--engage-surface); --bs-tooltip-opacity: 1; }
.popover { --bs-popover-font-size: var(--engage-text-min); --bs-popover-header-font-size: var(--engage-text-base); --bs-popover-body-color: var(--engage-text); }
.invalid-feedback, .invalid-tooltip { color: var(--engage-danger); }
.valid-feedback, .valid-tooltip { color: var(--engage-success); }
.invalid-tooltip { background: var(--engage-danger-bg); }
.valid-tooltip { background: var(--engage-success-bg); }
:focus-visible { outline: 3px solid var(--engage-focus) !important; outline-offset: 3px; }
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--engage-text-secondary); opacity: 1; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; overflow-y: auto; background: var(--engage-surface); border-right: 1px solid var(--engage-border); padding: 24px 16px; display: flex; flex-direction: column; z-index: 20; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: var(--engage-text-title); font-weight: 700; color: var(--engage-text); padding: 0 8px; text-decoration: none; }
.wordmark-dot { color: var(--engage-primary); margin-left: -10px; }
.brand-mark { height: 58px; width: 58px; flex-shrink: 0; background: var(--engage-primary); color: var(--engage-surface); font-size: 2.6875rem; font-weight: 700; line-height: 1.15; border-radius: var(--engage-radius-card); text-align: center; letter-spacing: -5px; padding-right: 6px; }
.brand-mark span { font-size: 1.5rem; color: var(--engage-surface); }
.small-mark { width: 36px; height: 36px; font-size: 1.75rem; border-radius: var(--engage-radius-control); letter-spacing: -4px; }
.small-mark span { font-size: var(--engage-text-card); }
.store-label, .nav-label { font-size: var(--engage-text-min); color: var(--engage-text-secondary); margin: 16px 8px 24px; }
.nav-label { margin-bottom: 8px; }
.nav-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--engage-radius-control); color: var(--engage-text-secondary); font-weight: 500; margin: 4px 0; text-decoration: none; border-left: 3px solid transparent; }
.nav-item span { width: 24px; text-align: center; line-height: 1; }
.nav-item.active { background: var(--engage-primary-soft); color: var(--engage-primary-soft-text); border-left-color: var(--engage-primary); font-weight: 600; }
.nav-item:hover { background: var(--engage-primary-soft); color: var(--engage-primary-soft-text); }
.sidebar-bottom { margin-top: auto; padding: 24px 8px 0; font-size: var(--engage-text-min); color: var(--engage-text-secondary); border-top: 1px solid var(--engage-border); }
.sidebar-bottom p { font-size: var(--engage-text-min); margin: 8px 0 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; background: var(--engage-primary); border-radius: 50%; margin-right: 8px; }
.workspace { margin-left: 248px; }
.topbar { min-height: 88px; background: var(--engage-surface); border-bottom: 1px solid var(--engage-border); display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; gap: 16px; }
.breadcrumb-label { font-size: var(--engage-text-min); color: var(--engage-text-secondary); }
.breadcrumb-label span { padding: 0 8px; }
.account { display: flex; gap: 8px; align-items: center; }
.avatar { background: var(--engage-primary-soft); color: var(--engage-primary-soft-text); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 600; }
.account-name { font-size: var(--engage-text-min); }
.account-name small { display: block; color: var(--engage-text-secondary); }
.menu-toggle { display: none; }
.main-content { max-width: 1480px; margin: auto; padding: 32px; }
.eyebrow { font-size: var(--engage-text-min); font-weight: 600; color: var(--engage-primary); margin-bottom: 12px; }
.page-heading { margin-bottom: 24px; }
.page-heading p { color: var(--engage-text-secondary); margin: 12px 0 0; }
.hero-card { background: var(--engage-primary-soft); border: 1px solid var(--engage-border); border-radius: var(--engage-radius-card); padding: 24px; }
.hero-card h2 { margin: 16px 0; }
.hero-card p { color: var(--engage-text-secondary); }
.hero-card .btn { margin-top: 8px; }
.btn { font-size: var(--engage-text-base); min-height: 44px; padding: 8px 16px; font-weight: 500; border-radius: var(--engage-radius-control); white-space: normal; }
.btn-primary { --bs-btn-color: var(--engage-surface); --bs-btn-bg: var(--engage-primary); --bs-btn-border-color: var(--engage-primary); --bs-btn-hover-color: var(--engage-surface); --bs-btn-hover-bg: var(--engage-primary-hover); --bs-btn-hover-border-color: var(--engage-primary-hover); --bs-btn-active-color: var(--engage-surface); --bs-btn-active-bg: var(--engage-primary-pressed); --bs-btn-active-border-color: var(--engage-primary-pressed); }
.btn-light, .btn-outline-secondary { --bs-btn-color: var(--engage-text); --bs-btn-bg: var(--engage-surface); --bs-btn-border-color: var(--engage-control-border); --bs-btn-hover-color: var(--engage-primary-soft-text); --bs-btn-hover-bg: var(--engage-primary-soft); --bs-btn-hover-border-color: var(--engage-primary); --bs-btn-active-color: var(--engage-primary-soft-text); --bs-btn-active-bg: var(--engage-primary-soft); --bs-btn-active-border-color: var(--engage-primary-pressed); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn, .form-control:disabled, .form-select:disabled { color: var(--engage-disabled-text); background: var(--engage-disabled-bg); border-color: var(--engage-control-border); opacity: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.stats-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat-card, .panel { min-width: 0; background: var(--engage-surface); border: 1px solid var(--engage-border); border-radius: var(--engage-radius-card); padding: 24px; box-shadow: var(--engage-shadow); }
.stat-card div, .stat-card small { color: var(--engage-text-secondary); font-size: var(--engage-text-min); }
.stat-card strong { display: block; font-size: var(--engage-text-metric); line-height: 1.2; font-weight: 600; margin: 12px 0 8px; }
.panel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-heading h2 { margin: 0; }
.empty { text-align: center; padding: 32px 16px; }
.empty-icon { display: grid; place-items: center; margin: 0 auto 16px; width: 48px; height: 48px; border-radius: var(--engage-radius-card); color: var(--engage-primary-soft-text); background: var(--engage-primary-soft); font-size: 1.875rem; }
.empty p { color: var(--engage-text-secondary); max-width: 440px; margin: 12px auto 0; }
.setup-item { display: flex; gap: 12px; margin: 24px 0; }
.setup-item > span { background: var(--engage-primary-soft); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: var(--engage-text-min); color: var(--engage-primary-soft-text); flex-shrink: 0; }
.setup-item a { font-weight: 600; }
.setup-item p { font-size: var(--engage-text-min); color: var(--engage-text-secondary); margin: 4px 0 0; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 32px; border-top: 1px solid var(--engage-border); padding-top: 24px; color: var(--engage-text-secondary); font-size: var(--engage-text-min); }
.toolbar, .pagination-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 24px; }
.tabs a { padding: 12px 0; color: var(--engage-text-secondary); text-decoration: none; }
.tabs a.selected { color: var(--engage-primary); border-bottom: 3px solid var(--engage-primary); }
.search-form { display: flex; gap: 8px; max-width: 500px; margin-bottom: 24px; }
.search-form .form-control { min-width: 0; }
.form-control, .form-select { font-size: var(--engage-text-base); min-height: 44px; border-color: var(--engage-control-border); padding: 8px 12px; border-radius: var(--engage-radius-control); color: var(--engage-text); background-color: var(--engage-surface); }
.form-control:focus, .form-select:focus { color: var(--engage-text); border-color: var(--engage-primary); box-shadow: none; }
.form-label { font-size: var(--engage-text-min); color: var(--engage-text-secondary); font-weight: 500; }
.table { font-size: var(--engage-text-base); --bs-table-color: var(--engage-text); --bs-table-bg: var(--engage-surface); --bs-table-border-color: var(--engage-border); }
.table { min-width: 600px; overflow-wrap: normal; }
.table th { white-space: nowrap; font-size: var(--engage-text-min); font-weight: 600; color: var(--engage-text-secondary); padding: 16px 12px; background: var(--engage-surface-subtle); }
.table td { padding: 16px 12px; }
.table-responsive { max-width: 100%; }
.table-responsive:focus-visible { outline-offset: -3px; }
.badge-soft { display: inline-block; font-size: var(--engage-text-min); font-weight: 500; background: var(--engage-primary-soft); color: var(--engage-primary-soft-text); border-radius: var(--engage-radius-control); padding: 4px 8px; }
.pagination-bar { font-size: var(--engage-text-min); color: var(--engage-text-secondary); margin: 24px 0 0; }
.page-link { font-size: var(--engage-text-min); min-width: 44px; min-height: 44px; color: var(--engage-primary); }
.back-link { display: inline-block; margin-bottom: 24px; }
.consent-block { border-bottom: 1px solid var(--engage-border); margin: 24px 0; padding-bottom: 4px; }
.narrow-panel { max-width: 850px; }
.rule-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center; margin: 16px 0; color: var(--engage-text-secondary); }
.matching-count { background: var(--engage-primary-soft); border-radius: var(--engage-radius-control); padding: 16px; margin: 24px 0; color: var(--engage-primary-soft-text); font-weight: 600; }
.preview-panel { position: sticky; top: 24px; }
.message-preview { border: 1px solid var(--engage-border); border-radius: var(--engage-radius-control); min-height: 280px; padding: 24px; margin-top: 24px; }
.message-from { font-size: var(--engage-text-min); color: var(--engage-text-secondary); border-bottom: 1px solid var(--engage-border); padding-bottom: 16px; margin-bottom: 24px; }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: var(--engage-text-base); }
.message-preview h3 { margin-bottom: 24px; }
.sms-preview { max-width: 320px; margin-inline: auto; border-radius: 24px; background: var(--engage-primary-soft); }
.revision { border-bottom: 1px solid var(--engage-border); padding: 16px 0; }
summary { cursor: pointer; padding: 8px 0; min-height: 44px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--engage-text-min); background: var(--engage-surface-subtle); padding: 16px; border-radius: var(--engage-radius-control); }
.integration-icon { background: var(--engage-primary-soft); color: var(--engage-primary-soft-text); font-weight: 600; width: 48px; height: 48px; border-radius: var(--engage-radius-card); display: grid; place-items: center; font-size: 1.625rem; margin-bottom: 24px; }
.integration-card { height: 100%; }
.integration-card .badge-soft { float: none !important; margin-bottom: 16px; }
.safeguards { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; margin: 24px 0; }
.safeguards dt { font-weight: 500; color: var(--engage-text-secondary); }
.safeguards dd { margin: 0; color: var(--engage-primary); }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { background: var(--engage-surface); border: 1px solid var(--engage-border); padding: 32px; border-radius: var(--engage-radius-card); width: 100%; max-width: 480px; box-shadow: var(--engage-shadow); }
.login-card .brand-mark { margin-bottom: 24px; }
.login-card form { margin-top: 24px; }
.alert { font-size: var(--engage-text-base); }
.alert-success { --bs-alert-color: var(--engage-success); --bs-alert-bg: var(--engage-success-bg); --bs-alert-border-color: var(--engage-success); }
.alert-warning { --bs-alert-color: var(--engage-warning); --bs-alert-bg: var(--engage-warning-bg); --bs-alert-border-color: var(--engage-warning); }
.alert-danger { --bs-alert-color: var(--engage-danger); --bs-alert-bg: var(--engage-danger-bg); --bs-alert-border-color: var(--engage-danger); }
.alert-info { --bs-alert-color: var(--engage-info); --bs-alert-bg: var(--engage-info-bg); --bs-alert-border-color: var(--engage-info); }
.alert-light { --bs-alert-color: var(--engage-text-secondary); --bs-alert-bg: var(--engage-surface-subtle); --bs-alert-border-color: var(--engage-border); }
.alert-link { color: inherit; }
/* Long user content wraps; tabular content scrolls inside its labeled region. */
h1, h2, h3, p, .stat-card, .panel, .alert, .account-name, .breadcrumb-label { overflow-wrap: anywhere; }
@media (max-width: 1199px) {
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid.three { grid-template-columns: 1fr; }
  .main-content { padding: 24px; }
  .topbar { padding-inline: 24px; }
  .account-name { display: none; }
}
@media (max-width: 991px) {
  .sidebar { visibility: hidden; transform: translateX(-100%); }
  .workspace { margin-left: 0; }
  .menu-toggle { display: flex; align-items: center; gap: 8px; }
  .nav-open .sidebar { visibility: visible; transform: none; top: var(--engage-header-height, 88px); width: min(280px,100%); box-shadow: var(--engage-shadow); }
  .topbar { position: relative; z-index: 21; }
  .preview-panel { position: static; }
}
@media (max-width: 575px) {
  h1 { font-size: 1.625rem; }
  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar > .d-flex { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px !important; }
  .account { margin-left: auto; }
  .avatar { display: none; }
  .main-content { padding: 24px 16px; }
  .panel, .stat-card, .hero-card, .login-card { padding: 16px; }
  .stats-grid, .stats-grid.three { grid-template-columns: 1fr; }
  .rule-row { grid-template-columns: 1fr; gap: 8px; }
  .rule-row > span { display: none; }
  .tabs { gap: 16px; }
  .message-preview { padding: 16px; }
  .safeguards { grid-template-columns: 1fr; gap: 8px; }
  .safeguards dd { margin-bottom: 8px; }
  .d-flex.gap-2 { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* System health uses the shared brand tokens and type scale. */
.health-metrics { margin: 0; }
.health-metrics > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 12px 0; border-bottom: 1px solid var(--engage-border); }
.health-metrics dt { font-weight: 500; overflow-wrap: anywhere; }
.health-metrics dd { margin: 0; }

/* Email builder uses shared Engage tokens and keeps the email at actual size. */
.builder-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.builder-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.builder-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(320px,2.4fr) minmax(240px,1.2fr);gap:16px;align-items:start}
.builder-grid>*{min-width:0;padding:16px}.builder-grid h2{font-size:1.125rem}.section-library{display:grid;gap:8px;grid-template-columns:1fr 1fr}.section-library .btn{white-space:normal;text-align:left}
.section-list{list-style:none;padding:0;display:grid;gap:8px}.section-list .btn{width:100%;text-align:left;overflow-wrap:anywhere;white-space:normal}
.builder-grid [aria-pressed=true]{background:var(--engage-primary-soft);color:var(--engage-primary-soft-text);border:2px solid var(--engage-primary)}
.section-actions{display:flex;flex-wrap:wrap;gap:8px}.preview-scroll{overflow:auto;max-width:100%;background:var(--engage-bg);padding:8px}
#email-preview{display:block;border:1px solid var(--engage-control-border);width:600px;max-width:none;height:900px;margin:auto;background:var(--engage-surface)}
#email-preview.mobile{width:375px}.review-email{width:100%;height:900px;border:1px solid var(--engage-control-border)}
@media(max-width:1150px){.builder-grid{grid-template-columns:minmax(200px,1fr) minmax(320px,2fr)}.builder-settings{grid-column:1/-1}}
@media(max-width:850px){.builder-grid{grid-template-columns:minmax(0,1fr)}.builder-settings{grid-column:auto}.section-library{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.section-library{grid-template-columns:1fr 1fr}}
#email-builder{container-type:inline-size}
@container(max-width:1000px){.builder-grid{grid-template-columns:minmax(200px,1fr) minmax(300px,2fr)}.builder-settings{grid-column:1/-1}}
@container(max-width:650px){.builder-grid{grid-template-columns:minmax(0,1fr)}.builder-settings{grid-column:auto}}