/* as-engage.css — Engage dashboard styles (v0.1.85) */

/* Focus section */
#as-app .engage-focus { background:var(--s); border:1px solid var(--b); padding:20px; margin-bottom:16px; }
#as-app .engage-focus-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--ac); margin-bottom:12px; }
#as-app .focus-item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--sa); cursor:pointer; }
#as-app .focus-item:last-child { border-bottom:none; }
#as-app .focus-item:hover { background:var(--sa); margin:0 -8px; padding:10px 8px; }
#as-app .focus-dot { width:8px; height:8px; flex-shrink:0; margin-top:4px; }
#as-app .focus-content { flex:1; }
#as-app .focus-title { font-size:13px; font-weight:600; }
#as-app .focus-meta { font-size:11px; color:var(--t3); margin-top:2px; }
#as-app .focus-tag { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; margin-left:8px; }
#as-app .focus-empty { padding:24px; text-align:center; color:var(--t3); font-size:12px; }

/* Grid layout */
#as-app .engage-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
#as-app .engage-grid-vel { grid-template-columns:280px 1fr; }
#as-app .engage-card { background:var(--s); border:1px solid var(--b); padding:16px; }
#as-app .engage-card-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--t3); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
#as-app .engage-card-title span { font-size:16px; font-weight:700; color:var(--t1); }

/* Velocity donut */
#as-app .vel-tabs { display:flex; gap:0; margin-bottom:12px; border-bottom:1px solid var(--b); }
#as-app .vel-tab { padding:6px 12px; font-size:11px; font-weight:600; color:var(--t3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
#as-app .vel-tab:hover { color:var(--t1); }
#as-app .vel-on { color:var(--ac); border-bottom-color:var(--ac); }
#as-app .vel-ring { transition:stroke-dasharray .4s ease; }
#as-app .vel-stats { display:flex; justify-content:space-around; margin-top:12px; font-size:10px; color:var(--t3); text-align:center; }
#as-app .vel-num { font-size:18px; font-weight:700; color:var(--t1); }

/* Heatmap table */
#as-app .heatmap-table { width:100%; border-collapse:collapse; }
#as-app .heatmap-table th { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); text-align:center; padding:6px 4px; border-bottom:2px solid var(--b); }
#as-app .heatmap-table td { padding:4px; text-align:center; }
#as-app .heatmap-table tr:hover td { background:var(--sa); }
#as-app .hm-project { text-align:left !important; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; padding:6px 4px !important; cursor:pointer; }
#as-app .hm-dot { width:8px; height:8px; flex-shrink:0; }
#as-app .hm-cell { font-size:11px; font-weight:600; padding:4px 6px; }
#as-app .hm-green { background:var(--gnl); color:var(--gn); }
#as-app .hm-yellow { background:var(--acl); color:var(--ach,#B8630B); }
#as-app .hm-red { background:var(--rdl); color:var(--rd); }
#as-app .hm-neutral { background:var(--sa); color:var(--t3); }
#as-app .hm-status { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:3px 6px; display:inline-block; }
#as-app .heatmap-table tr:hover .hm-green { background:#d4ecd4; }
#as-app .heatmap-table tr:hover .hm-yellow { background:#fce8cc; }
#as-app .heatmap-table tr:hover .hm-red { background:#f5d5d2; }

/* Next actions */
#as-app .next-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--sa); cursor:pointer; }
#as-app .next-item:last-child { border-bottom:none; }
#as-app .next-item:hover { background:var(--sa); margin:0 -4px; padding:8px 4px; }
#as-app .next-pri { width:6px; height:6px; flex-shrink:0; }
#as-app .next-project { font-size:9px; font-weight:700; padding:1px 5px; color:#FFF; flex-shrink:0; }
#as-app .next-title { font-size:12px; font-weight:600; flex:1; }
#as-app .next-due { font-size:10px; color:var(--t3); flex-shrink:0; }

/* Client health */
#as-app .health-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--sa); }
#as-app .health-row:last-child { border-bottom:none; }
#as-app .health-avatar { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#FFF; flex-shrink:0; }
#as-app .health-info { flex:1; }
#as-app .health-name { font-size:12px; font-weight:600; }
#as-app .health-detail { font-size:10px; color:var(--t3); }
#as-app .health-badge { width:8px; height:8px; flex-shrink:0; }

/* Responsive */
@media(max-width:768px) {
    #as-app .engage-grid, #as-app .engage-grid-vel { grid-template-columns:1fr; }
}

/* ═══ Marketing pulse band (WS5, v0.10.6) ═══
 * Folds Pulse (reach/engagement/audience — honest empty until a read
 * bridge exists) + Visibility (score/100 — same) + live campaign win-rate
 * rings (real, GET /reports/campaigns) above the Engage tray's existing
 * Handoffs/Velocity/Heatmap/Next-Actions sections. Squared (no radius),
 * 13px, reuses the shell's theme tokens — no new palette introduced.
 * All rules scoped under #as-mpulse so nothing here can collide with the
 * Engage drawer's own classes or the app shell. */
#as-app #as-mpulse { margin-bottom:18px; }
#as-app #as-mpulse .asmp-h { display:flex; align-items:center; gap:9px; margin:0 0 10px; }
#as-app #as-mpulse .asmp-h h3 { font-family:'Fraunces',Georgia,serif; font-size:15px; font-weight:700; }
#as-app #as-mpulse .asmp-sub { font-size:11px; color:var(--t3); }
#as-app #as-mpulse .asmp-collapse { margin-left:auto; font-size:11px; font-weight:600; color:var(--t3); display:flex; align-items:center; gap:5px; border:none; background:none; padding:0; cursor:pointer; font-family:inherit; }
#as-app #as-mpulse .asmp-collapse:hover { color:var(--t1); }
#as-app #as-mpulse .asmp-collapse svg { width:13px; height:13px; }
#as-app #as-mpulse .asmp-loading { font-size:12px; color:var(--t3); padding:14px 0; }

#as-app #as-mpulse .asmp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:9px; margin-bottom:11px; }
#as-app #as-mpulse .asmp-k { background:var(--s); border:1px solid var(--b); border-top:2px solid var(--ac); padding:10px 12px; }
#as-app #as-mpulse .asmp-k .n { font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:700; line-height:1; }
#as-app #as-mpulse .asmp-k .n .suf { font-size:11px; color:var(--t3); font-weight:400; }
#as-app #as-mpulse .asmp-k .l { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; margin-top:5px; }
#as-app #as-mpulse .asmp-k .d { font-size:9.5px; color:var(--t3); margin-top:4px; line-height:1.35; }
#as-app #as-mpulse .asmp-k.reach { border-top-color:var(--bl); }
#as-app #as-mpulse .asmp-k.eng { border-top-color:var(--pu); }
#as-app #as-mpulse .asmp-k.aud { border-top-color:var(--pu); }
#as-app #as-mpulse .asmp-k.vis { border-top-color:var(--gn); }
#as-app #as-mpulse .asmp-k.win { border-top-color:var(--ac); }

#as-app #as-mpulse .asmp-cards { display:grid; grid-template-columns:1.35fr 1fr; gap:11px; }
#as-app #as-mpulse .asmp-card { background:var(--s); border:1px solid var(--b); display:flex; flex-direction:column; }
#as-app #as-mpulse .asmp-card .ch { display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid var(--b); background:var(--sa); }
#as-app #as-mpulse .asmp-card .ch h4 { font-size:12px; font-weight:700; flex:1; }
#as-app #as-mpulse .asmp-sub2 { font-size:10px; color:var(--t3); }
#as-app #as-mpulse .asmp-seg { display:inline-flex; border:1px solid var(--b); background:var(--bg); }
#as-app #as-mpulse .asmp-seg button { padding:3px 9px; font-size:10.5px; font-weight:600; color:var(--t3); background:none; border:none; cursor:pointer; }
#as-app #as-mpulse .asmp-seg button.on { background:var(--ac); color:#FFF; }
#as-app #as-mpulse .asmp-card .cb { padding:11px 13px; }
#as-app #as-mpulse .asmp-chart svg { width:100%; height:118px; display:block; }
#as-app #as-mpulse .asmp-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; }
#as-app #as-mpulse .asmp-legend span { font-size:10.5px; color:var(--t2); display:flex; align-items:center; gap:5px; }
#as-app #as-mpulse .asmp-legend i { width:10px; height:3px; display:inline-block; }
#as-app #as-mpulse .asmp-empty { text-align:center; color:var(--t3); font-size:11.5px; padding:20px 8px; }

#as-app #as-mpulse .asmp-rings { display:flex; flex-direction:column; }
#as-app #as-mpulse .asmp-ring-row { display:flex; align-items:center; gap:11px; padding:7px 0; border-bottom:1px solid var(--b); cursor:default; }
#as-app #as-mpulse .asmp-ring-row:last-child { border-bottom:none; }
#as-app #as-mpulse .asmp-ring-row[data-active="1"] { background:var(--sa); margin:0 -8px; padding:7px 8px; }
#as-app #as-mpulse .asmp-ring-row .ring { width:36px; height:36px; flex:0 0 auto; }
#as-app #as-mpulse .asmp-ring-row .wg { flex:1; min-width:0; }
#as-app #as-mpulse .asmp-ring-row .wg b { font-size:12px; font-weight:600; display:flex; align-items:center; gap:7px; }
#as-app #as-mpulse .asmp-ring-row .wg span { font-size:10.5px; color:var(--t3); display:block; margin-top:1px; }
#as-app #as-mpulse .asmp-flag { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:1px 5px; }
#as-app #as-mpulse .asmp-flag.win { background:var(--gnl); color:var(--gn); }
#as-app #as-mpulse .asmp-flag.need { background:var(--rdl); color:var(--rd); }
#as-app #as-mpulse .asmp-go { font-size:10.5px; font-weight:700; color:var(--ac); white-space:nowrap; display:flex; align-items:center; gap:2px; cursor:pointer; }
#as-app #as-mpulse .asmp-go:hover { color:var(--ach); }
#as-app #as-mpulse .asmp-go svg { width:12px; height:12px; }

#as-app #as-mpulse .asmp-dec { margin-top:11px; background:var(--s); border:1px solid var(--b); }
#as-app #as-mpulse .asmp-dec-h { display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--b); background:var(--sa); }
#as-app #as-mpulse .asmp-dec-h .lbl { font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--t3); font-weight:700; }
#as-app #as-mpulse .asmp-filter-chip { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--ac); background:var(--acl); padding:2px 8px; cursor:pointer; }
#as-app #as-mpulse .asmp-dec-item { display:flex; align-items:flex-start; gap:10px; padding:9px 13px; border-bottom:1px solid var(--sa); cursor:pointer; }
#as-app #as-mpulse .asmp-dec-item:last-child { border-bottom:none; }
#as-app #as-mpulse .asmp-dec-item:hover { background:var(--sa); }
#as-app #as-mpulse .asmp-dec-item .dot { width:7px; height:7px; margin-top:4px; flex:0 0 auto; }
#as-app #as-mpulse .asmp-dec-item .body { flex:1; min-width:0; }
#as-app #as-mpulse .asmp-dec-item .t { font-size:12.5px; font-weight:600; }
#as-app #as-mpulse .asmp-dec-item .tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-left:8px; }
#as-app #as-mpulse .asmp-dec-item .meta { font-size:11px; color:var(--t3); margin-top:2px; }

@media(max-width:700px) {
    #as-app #as-mpulse .asmp-cards { grid-template-columns:1fr; }
}